Working on the 6.3.4 version of Storybook.
It's a React project.
I have a page that has links to sections on that page
const NavBarElement = ({ text }) => (
<a href={`#${text}`} className={classes.navBarElement}>
{text}
</a>
);
In that story I will have divs with those ids
Now in Storybook those links show up as:
http://localhost:61276/iframe.html?id=welcome--welcome&viewMode=story#about
Clicking on that link opens the iframe, hiding away the Storybook menus, etc..
Any way around this?
Related
I have a post card, which if clicked brings you to the post's page, i also have a link inside the post card which when clicked brings you to the album of posts the post is from.
The code structure is similar to this one:
<Link href={post.url} className={styles.post}>
...title and stuff
<Link href={post.groupUrl}>
{post.group}
</Link>
</Link>
It worked before updating to Nextjs 13
This is less of a Next.js bug because, at the end, the Link component is just a fancy a tag and also gets rendered as one in the DOM. And, as you can read here, nesting links is illegal.
I'm creating a website in WordPress that has child pages for multiple locations.
For example, the main page has a Home, About, and Contact pages + 15 service pages.
And the location pages have the About, Contact, and the 15 service pages duplicated.
I have links in the about page linking to the 15 services. Now If I could have a relative link it would be as easy as duplicating this section.
What I want the link to do is that if you are on
https://example.com/about/ and you click a service
it takes you to https://example.com/service1/
but if you are on https://example.com/location/
the same link structure takes you to https://example.com/location/service1
I don't want to have to create 15 different links + different menu links for every single location when all you need to do is add service1/ to the end of the slug you are on.
In Wordpress you should always use the built-in "menu" functionality: You create a menu once (in the WP backend, on the "Design > Menues" page), give it a name, define a position in your PHP template (for example the header.php file) and assign that position to that menu (in the WP backend again). WP will take care of the correct filepaths, regardless on which page you are, by dynamically creating absolute links when parsing the pages. And you can create as many menues as you want, for example the main navigation, footer nav, sidebar menu or whatever.
Here's a simple example for the code in a php template:
<nav id="main_nav">
<?php
$arguments = array(
'theme-location' => 'main_menu_1',
'container' => 'ul'
);
wp_nav_menu($arguments);
?>
</nav>
I'm using the Genesis Framework on my website. I disabled the dashicons from loading on the front-end using the code below in my functions.php file:
function wpdocs_dequeue_dashicon() {
if (current_user_can( 'update_core' )) {
return;
}
wp_deregister_style('dashicons');
}
add_action( 'wp_enqueue_scripts', 'wpdocs_dequeue_dashicon' );
but i noticed my mobile/tablet views are now missing icons. More particularly, the hamburger menu and the down arrow for a dropdown.
Here's how it looks like --> https://www.dropbox.com/s/7azuj6vraehzll5/dashicons.png?dl=0
I'm not using the dashicons on my desktop version that's why i disabled it (because it's causing my site to load slowly using website speed tests).
Is there a way to load dashicons only on mobile? Or at least those two icons? or via css? I can't seem to find any. All my googling shows me how to add them (which i don't).
The only reason I want them to load on mobile is to the hamburger menu icon and a down arrow is the best representation that that's a menu and an option avaialable.
I have created a web app with ReactJs which I now want to make a part of a Wordpress page. The web app ist styled using react bootstrap.
The idea was:
To use a wordpress template which just renders the div where my App loads into:
Wordpress Template:
<div id="app"> </div>
Styling for the App is restricted to the div "app":
#app {
//Bootstrap css + additional css used for the app
}
This way the style of my App doesn't interfere with the css of the wordpress template and the Header / Footer of the Page look perfect.
The problem:
The css of the wordpress theme conflict with the bootstrap css used in the div "app". Because of this the web app looks like a mess.
Is there an (easy) way to ignore the css of the wordpress template within the app div?
I'm working in wordpress with twitter bootstrap theme.i want to use prettyphoto media wordpress plugin to show my newsletters but when i clicked on any image its opening it as a url not in popup box. i have used it before in my another wordpress sites and its working fine but not now.
Here is my code to open an image:
<img src="http://projects.flashonmind.com/hoppworldwide/wp-content/uploads/2013/10/mar01.jpg" alt="This is the title" />
When i have checked the console in mozilla its showing that $(...).prettyPhoto is not a function.
Actualy there are two scripts in my full width template which i have used for some menu content when i remove these scripts its working fine but i have to use these script so where i have to put my scripts now here are the scripts:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$(".sec-menu").mouseover(function(e) {
$("#my-account").css("display","block");
});
$(".sec-menu").mouseout(function(e) {
$("#my-account").css("display","none");
});
});
</script>
Please include jQuery => 1.8.3 on your theme header to use prettyPhoto.