I am fairly new to HTML coding, so could really use the communities help here. I have a HTML RichText widget, which I am using to create a navigation bar within our data visualization tool, Datorama. Unfortunately, when you click on the menu items, it keeps opening the page within the widget and not loading the full page.
Here is the Code:
<nav class="navigation">
<ul class="menu">
<li class="menu__item">
<a href="#" class="menu__link">
<span class="menu__title">
<span class="menu__first-word" data-hover="About">
About
</span>
<span class="menu__second-word" data-hover="Us">
Us
</span>
</span>
</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">
<span class="menu__title">
<span class="menu__first-word" data-hover="Our">
Our
</span>
<span class="menu__second-word" data-hover="History">
History
</span>
</span>
</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">
<span class="menu__title">
<span class="menu__first-word" data-hover="Latest">
Latest
</span>
<span class="menu__second-word" data-hover="News">
News
</span>
</span>
</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">
<span class="menu__title">
<span class="menu__first-word" data-hover="New">
New
</span>
<span class="menu__second-word" data-hover="Arrivals">
Arrivals
</span>
</span>
</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">
<span class="menu__title">
<span class="menu__first-word" data-hover="On">
On
</span>
<span class="menu__second-word" data-hover="Sale">
Sale
</span>
</span>
</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">
<span class="menu__title">
<span class="menu__first-word" data-hover="Contact">
Contact
</span>
<span class="menu__second-word" data-hover="Us">
Us
</span>
</span>
</a>
</li>
</ul>
Could anyone please assist in adjusting this to when a menu item is clicked, it opens a new page?
Thank you,
-Nakul B.
I'm Johnny from Datorama's Tier 2 Support,
Because the Rich Text works with iFrames, it means that the browser opens a new embedded HTML document within the active one, and links are opened within the embedded iFrame instead of the tab itself, or a new tab.
This can be controlled by working with the a tag's 'target' attribute, and the following options can be assigned:
_blank - new window or tab
_self - Opens within the same window or iFrame (default behaviour)
_parent - Opens the link within the parent frame
_top - Opens within the full body of the window
In the case mentioned, we should use the '_blank' attribute, and the following code should be used:
<nav class="navigation">
<ul class="menu">
<li class="menu__item">
<a href="https://google.com" class="menu__link" target="_blank">About Us
</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link" target="_blank">Our History
</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link" target="_blank">Latest News
</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link" target="_blank">New Arrivals
</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link" target="_blank">On Sale
</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link" target="_blank">Contact Us
</a>
</li>
</ul>
I've also changed the structure of the a tags, and reduced the number of span within it, to increase readability. Now the links should open a new page/tab on click.
Please don't hesitate to contact us at support#datorama.com for further assistance for setting your widget up!
Related
I have the following CSS items that I am trying to simultaneously change the hover effect for when rolling over .blocks-item
.blocks-item
.blocks-item-title
.blocks-item-description
.blocks-item-link
I have set .blocks-item:hover to the following:
.blocks-item:hover {
background: #f8f8f8;
color: #15191f;
}
If I do the following:
.blocks-item:hover,
.blocks-item-title:hover {
background: #f8f8f8;
color: #15191f;
}
Then the title only changes colour when rolled over with the mouse which I am expecting.
I am trying to bind all of the 4 elements so that I only need to hover over .blocks-item to be able to change the hover effect of all of the other items (description, title, link)
What is the best way of going about this?
I know this has been answered many times but struggling to adapt the solutions.
Appreciate the understanding and help
HTML:
<ul class="blocks-list">
<li class="blocks-item">
<a href="/support/tickets/new" class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-pencil"></span></span>
<span class="blocks-item-title">Create Ticket</span>
<span class="blocks-item-description">Submit a tracked ticket for any IT queries or issues here</span>
</a>
</li>
<li class="blocks-item">
<a href="tel:" class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-phone-handset"></span></span>
<span class="blocks-item-title">Call Us</span>
<span class="blocks-item-description">Our call centre is available 24/7 to help with issues and queries</span>
</a>
</li>
<li class="blocks-item">
<a href="#!" onclick="window.fcWidget.open();" class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-bubble"></span></span>
<span class="blocks-item-title">Live Chat</span>
<span class="blocks-item-description">Our live chat service is available from 8am - 8pm Monday - Friday</span>
</a>
</li>
<li class="blocks-item">
<a href="mailto:?subject=Support Request - " class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-envelope"></span></span>
<span class="blocks-item-title">Email</span>
<span class="blocks-item-description">For non-urgent issues, queries or general enquiries. We will respond within 24 Hours</span>
</a>
</li>
</ul>
Since the elements are children of .blocks-item, it's pretty simple. Start with a CSS selector .blocks-item:hover and then use a selector to target what you want to change.
.blocks-item:hover .blocks-item-title {
color: red
}
.blocks-item:hover .blocks-item-description {
color: green
}
.blocks-item:hover .blocks-item-link {
font-size: 2rem;
}
<ul class="blocks-list">
<li class="blocks-item">
<a href="/support/tickets/new" class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-pencil"></span></span>
<span class="blocks-item-title">Create Ticket</span>
<span class="blocks-item-description">Submit a tracked ticket for any IT queries or issues here</span>
</a>
</li>
<li class="blocks-item">
<a href="tel:" class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-phone-handset"></span></span>
<span class="blocks-item-title">Call Us</span>
<span class="blocks-item-description">Our call centre is available 24/7 to help with issues and queries</span>
</a>
</li>
<li class="blocks-item">
<a href="#!" onclick="window.fcWidget.open();" class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-bubble"></span></span>
<span class="blocks-item-title">Live Chat</span>
<span class="blocks-item-description">Our live chat service is available from 8am - 8pm Monday - Friday</span>
</a>
</li>
<li class="blocks-item">
<a href="mailto:?subject=Support Request - " class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-envelope"></span></span>
<span class="blocks-item-title">Email</span>
<span class="blocks-item-description">For non-urgent issues, queries or general enquiries. We will respond within 24 Hours</span>
</a>
</li>
</ul>
I have a Meteor 1.8.1 app that uses Dropdown from Bootstrap 3.3.7. I have the following html on my navbar
<ul class="nav navbar-nav" id="headerNav">
<li class="active">
<a href="/liveView">
<div class="icon-wrapper">
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
</div>
Live View
</a></li>
<li class="">
<a href="/broadcast">
<div class="icon-wrapper">
<span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span>
</div>
Broadcast
</a></li>
<li><a class="btnSwitchPlace" href="/">
<div class="icon-wrapper">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
<span class="badge">1</span>
</div>
<span>Channels</span>
</a></li>
<li class="user-menu dropdown">
<a id="display-name-link" href="#user-menu" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">
<span class="icon-wrapper">
<i class="glyphicon glyphicon-user"></i>
</span>
{{displayName}}<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a class="btnAgencyInfo" href="/agency">Agency</a></li>
<li>Create Channel</li>
<li class="divider"></li>
<li>Sign out</li>
</ul>
</li>
</ul>
On every browser but IE (tested on IE11) the dropdown opens as expected. On IE, the browser redirects to www.url.com/#user-menu
If I execute from console $('display-name-link').trigger('click') the dropdown opens and the bug doesn't trigger.
{{displayName}} was causing the component to re-render, since it first returns 'not-logged-in' and then, after the login is performed, it returns the actual name. This somehow causes bootstrap not to reload the events handling the dropdown and the anchor tag executes as it would normally.
Fix was just to add a e.preventDefault on the display-name-link click event handler.
$('#display-name-link').click(function(e){
e.preventDefault()
})
I am using materialize collapsible for my navigation. Everything works fine except when I reload the page. The collapsible gets closed and I have to manually make it active again. How do I make the collapsible remain active on page reload?
Here's my code:
<ul id="slide-out" class="side-nav fixed leftside-navigation">
<ul class="collapsible" data-collapsible="expandable">
<li>
<a class="collapsible-header">
<i class="material-icons">home</i> Home
</a>
<div class="collapsible-body">
<ul>
<li ui-sref-active="active">
<a ui-sref="protect" ui-sref-opts="{reload: true}">
<i class="material-icons">dashboard</i> Dashboard
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="store" ui-sref-opts="{reload: true}">
<i class="material-icons">cloud_done</i> Storage
</a>
</li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header">
<i class="material-icons">event_available</i>Manage
</a>
<div class="collapsible-body">
<ul>
<li ui-sref-active="active">
<a ui-sref="manage" ui-sref-opts="{reload: true}">
<i class="material-icons">storage</i> Manage Storage
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="enroll" ui-sref-opts="{reload: true}">
<i class="material-icons">file_download</i> Enroll
</a>
</li>
</ul>
</div>
</li>
</ul>
</ul>
What you want to do concerns program state, hence there's no way for you to do that unless you save the name or id of the active accordion. which can easily be done using browser local storage.
I would like to get some advice on WAI-ARIA markup I have added to my paginated post navigation.
Does this look correct, am I missing anything?
Should anything be added/removed to the current page link (#2)?
Also, curious on my "Page Count" and "View All" sections what if anything can be added to make it more ARIA-friendly.
<nav role="navigation" class="post-navigation">
<ul role="menubar" class="pagination">
<!-- Page Count -->
<span class="page-count">Page 2 of 4 </span>
<li aria-label="Previous">
<a role="menuitem" aria-posinset="1" data-pagenum="1" href="#">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a role="menuitem" aria-posinset="1" data-pagenum="1" href="">1</a>
</li>
<li class="active">
<span role="menuitem" aria-posinset="2">2</span>
</li>
<li>
<a role="menuitem" aria-posinset="3" data-pagenum="3" href="#">3</a>
</li>
<li>
<a role="menuitem" aria-posinset="4" data-pagenum="4" href="#">4</a>
</li>
<li aria-label="Next">
<a role="menuitem" aria-posinset="3" data-pagenum="3" href="#">
<span aria-hidden="true">»</span>
</a>
</li>
<!-- View All link handing -->
<li aria-label="View All">
<a role="menuitem" href="#?viewall">View All</a>
</li>
</ul>
</nav>
My navigation bar isn't displaying the dividers for every subpage element. This is only happening in google chrome,not IE or FF. Here is an image (click here for larger size of image):
Here is my HTML code:
<li class="dropdown">
<a href="/jrknet/www/company" class="dropdown-toggle" data-toggle="dropdown" data-target="#">
Company
<b class="caret">
</b>
</a>
<ul class="dropdown-menu">
<li>
<a href="/jrknet/www/company/about-us">
About us
</a>
</li>
<li class="divider">
</li>
<li>
<a href="/jrknet/www/company/meet-the-team">
Meet the Team
</a>
</li>
<li class="divider">
</li>
<li>
<a href="/jrknet/www/company/mission-statement">
Mission Statement
</a>
</li>
<li class="divider">
</li>
<li>
<a href="/jrknet/www/company/development-methodology">
Development Methodology
</a>
</li>
<li class="divider">
</li>
<li>
<a href="/jrknet/www/company/quality-management">
Quality Management
</a>
</li>
<li class="divider">
</li>
<li>
<a href="/jrknet/www/company/business-continuity">
Business Continuity
</a>
</li>
</ul>
You can check zoom-in and zoom-out when such issues arise..
i don't find any problem with the code..
Moreover, if the problem remains, you can try changing your display resolution..