I'm using Ratchet to build a prototype for a mobile app.
I have a
<nav class="bar bar-tab bar-footer">
...
</nav>
element in page A and page B.
When using data-transition from page A to page B (using push.js), the element disappears.
Another element
<header class="bar bar-nav">
...
</header>
is displaying in both page A and B.
Any idea?
Did you have
<nav class="bar bar-tab bar-footer">
...
</nav>
in
<div class="content">
block?
Try use this structure:
<header class="bar bar-nav">
...
</header>
<div class="content">
...
</div>
<nav class="bar bar-tab">
...
</nav>
Same issue, If I refresh page B, the menu will appear again.
Had a similar issues with ratchet v2.0.2.
My case: two pages A and B. When transitioning from A to B the footer would not display. A refresh on B would display the footer. Page A did not have a bar-footer, page B did.
Reading through the docs I've found the statement that bars are updated based on their presence in the original page.
So the workaround: make sure that all pages have the bar blocks when the transition is made with push.js
Related
I would like to change the call to action button on the landing page of my website to a social icons element. How do I edit the HTML code to do this? I am using the "Paris - Business" theme. Thanks.
There is some documentation on how to do this, if you search the web. For example, my own site has a basic example of what to look for Landing Page Button Removal.
In that case, you could replace the code that makes the button with your own code.
That being said, there's some new features you can use that would make the content editable. Weebly just introduced "Sections". Sections allows you to have different sections on a page, and with that you can also drag and drop into the Header area. (See Screenshot)
*BUT, before you go ahead and do this, I should note that Weebly plans on making these changes to the newer themes, in the near future. When Paris would be done, or if it will be done, is anybody's guess.
Depending on the design of your Theme, this might be slightly different, so please keep that in mind.
Basically, for the Paris Theme, what was:
<div class="banner-wrap wsite-background">
<div class="container">
<div class="banner">
<h2>{headline:text global="false"}</h2>
<p>{headline-paragraph:text global="false"}</p>
<div class="button-wrap">{action:button global="false"}</div>
<span id="contentArrow"><span></span></span>
</div>
</div>
</div>
Would become:
<div class="banner-wrap wsite-background">
<div class="container">
{{#header}}
<div class="banner">
{content}
<span id="contentArrow"><span></span></span>
</div>
{{/header}}
</div>
</div>
*If you are customizing a Theme, I might also recommend making a custom page type, specifically with these changes.
If you want to use Sections, for the content area of the page it would look something like:
<div class="main-wrap">
{{#sections}}
<div class="container">{content}</div>
{{/sections}}
</div>
**Note: There isn't any documentation yet, and I have not tested this, so wsite-background may not be needed... but don't take my word for it.
Let’s say that I have a carousel on my index page.
Inside the template for index, it loads a particular channel, “Foo”
<div "slider">
<ul class="slides">
{exp:low_reorder:entries set="foo" dynamic="no"}
<li class="foo_{entry_id}">
<div class="container">
<div class="row-fluid">
<div class="span12">
{foo_html}
<style type="text/css">{foo_css}</style>
</div>
</div>
</div>
</li>
{/exp:low_reorder:entries}
</ul>
</div>
That channel, naturally, has a list of content items
I want the list of content items displayed to exclude one of the items in the channel if the referrer is not bing.
Can anyone show me the way that they would go about accomplishing that? I'm not getting any traction on the ellislab forum.
I whipped up a plugin for you, which you can find here
You can wrap the item in a conditional using that plugin to check if it should be output.
I am using Masonry - the HTML version
I have a div:
<div id="container" class="js-masonry" data-masonry-options='{ "itemSelector": ".item"}'>
within I have about 10:
<div class="item">
<img src="<?php the_field('image'); ?>" alt="<?php the_title(); ?>">
<p></p>
<a style="text-decoration:underline;" class="link-port" href="<?php the_field('link'); ?>" target="_blank"><?php the_title();?></a>
<p></p>
</div>
The problem is that when the page loads first time (uncached) the first few items show normally, but further down the page they stack on top of each other. They also overlap the footer.
If you either refresh the browser (or rotate the device) then all works fine but this is obviously not ideal for new visitors.
The JS was at the bottom of the page, but I moved to the top and it still did the same.
Has anyone come across this before?
Many thanks.
Aha! imagesLoaded seems to be the answer, full details here: http://masonry.desandro.com/appendix.html#imagesloaded
I've been searching high and low for the past couple of days for the file(s) in Orchard where I can customize the markup used for the navigation
Traversing the tree in the Designer Tool and looking at the template and HTML views doesn't help much seeing as the MenuItemLink renders the <li> in the HTML view but nothing renders it in the template view. So I am quite stumped.
The original markup is like so (Taken from the Designer Tools Zone [Navigation]):
<div class="zone zone-navigation">
<article class="widget-navigation widget-menu-widget widget">
<nav>
<ul class="menu menu-main-menu">
<li class="first">
Work
</li>
</ul>
</nav>
</article>
</div>
What I need is to customize the classes on the <ul> and <li> elements, really.
If possible I'd love to be able to customize it all so I didn't need the <div class="zone zone-navigation"> for example.
But is this even possible?
<li> element is rendered by MenuItem shape (Core\Shapes\MenuItem.cshtml)
<nav> and top <ul> elements are rendered by Menu shape
(Core\Shapes\Menu.cshtml)
<a> element is rendered by MenuItemLink shape (Core\Shapes\MenuItemLink.cshtml)
If you want to override the defaults, simply put appropriate Menu.cshtml, MenuItem.cshtml or MenuItemLink.cshtml files in your theme (or better - copy the default one(s) and alter). Those will be used then instead of the default ones I wrote about above.
In Orchard 1.3.10 when I create a list it gets assigned a permalink such as /people. When I add a person to the list and go to /people the person does not display. I see
When I add a widget to display people the person displays.
Am I doing something wrong, or is this Orchard working as designed?
Using the shape tracing module I see this In my content zone:
<div class="zone zone-content"> <div class="content-control">
<div class="manage-actions">Edit</div>
<article class="content-item list">
<header>
</header>
</article>
</div>
</div>
Creating a new site fixed my issue.
On my debug site I'm able to work around the issue by changing my list sort order, but not on my real site.
I filed a bug here: http://orchard.codeplex.com/workitem/18421