Been working on wrapping my head around expression engine now. And I'm using the Structure add-on as well. This is my first attempt of building my own template.
The problem I'm having is on the index page when you initially land on the site. It will repeat the entire html over and over until its' loaded every pages' content. It only does this on the index page. If you click on any other page it works as its supposed to.
Heres my code:
<!DOCTYPE html>
<html>
{exp:channel:entries channel="pages"}
<head>
<meta charset="UTF-8">
{!-- add="filename|filename2" --}
{embed="Pages/styles"}
{embed="Pages/scripts"}
<title>{title}</title>
</head>
<body>
<header>
<img src="img/logo.png" />
<nav>
{exp:structure:nav css_id="none" start_from="/" show_depth="2"}{/exp:structure:nav}
</nav>
</header>
<main>
<nav>
{exp:structure:breadcrumb inc_home="no" here_as_title="yes"}{/exp:structure:breadcrumb}
</nav>
{if structure:child_ids != '' OR structure:parent:entry_id != '0'}
<aside>
{exp:structure:nav css_id="none" show_depth="2" start_from="/{segment_1}" show_overview="yes" rename_overview="{structure:top:title}"}{/exp:structure:nav}
</aside>
{/if}
<article>
<h1>{title}</h1>
{page_contents}
</article>
</main>
<footer>
<nav>
{exp:structure:nav css_id="none" start_from="/" max_depth="1"}{/exp:structure:nav}
</nav>
<address>
<p>1234 Address St<br />
City Name, STATE 12345<br />
Phonee: 123 456 7890<br />
Email Us</p>
</address>
</footer>
</body>
{/exp:channel:entries}
</html>
And here is the link to the site: (no styling, just building and testing for now) http://www.oneoffs.co
It's not the prettiest solution but you could simply add entry_id to the loop which would limit it to only the homepage.
{exp:channel:entries channel="pages" entry_id="1"}
..
{/exp:channel:entries}
or
{exp:channel:entries channel="pages" {if segment_1 == ''}entry_id="1"{/if}}
..
{/exp:channel:entries}
...which only adds the entry_id if you're on your homepage (assumption that segment_1 is blank).
Related
I am having real problem with Arabic text in <pre> tag
For example if I put this code in a page view
<pre>
<html>
<head>
<title>First HTML Page</title>
</head>
<body>
<h1><span>اول صفحة ويب</span></h1>
<p>هذه أول فقرة ننشؤها في أول صفحة</p>
</body>
</html>
</pre>
I get this display in browser
Here you can see that the arabic text is reversed
This happens just in ASP.NET Core MVC. In other frameworks, the text is displayed correctly.
I've tried to change the dir and the lang attributes but it does not help.
I copied your code snippet and reproduced the issue in my side, I noticed that the content in the page is wrong but in F12 is right, so I'm afraid the browser deal with specific language content automatically for the elements in <pre> tag... So I tried to change the direction manually with the style. How do you think about it?
<div>
<div>
<div style="direction:ltr;unicode-bidi: bidi-override;color:red">اول صفحة ويب</div>
<span>اول صفحة ويب</span>
<p>هذه أول فقرة ننشؤها في أول صفحة</p>
</div>
<pre >
<html>
<head>
<title>First HTML Page</title>
</head>
<body>
<h1><span style="direction:rtl;unicode-bidi: bidi-override;">اول صفحة ويب</span></h1>
<h1><span>اول صفحة ويب</span></h1>
<p>هذه أول فقرة ننشؤها في أول صفحة</p>
</body>
</html>
</pre>
</div>
Context: We can't use the full semantic ui library due to security reason. So I want to try the individual semantic ui dropdown module, because it is very good solution for a lot of data entry scenarios.
The following code works when I reference the full library, but doesn't work when I reference the individual module.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="~/lib/semantic-ui-dropdown/dropdown.css"/>
</head>
<body>
<select class="ui dropdown">
<option value="1">Email</option>
<option value="2">Text</option>
</select>
<script src="~/lib/jQuery/dist/jquery.js"></script>
<script src="~/lib/semantic-ui-dropdown/index.js"></script>
<script src="~/lib/semantic-ui-dropdown/dropdown.js"></script>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
I dug into the problem, and find the generated html is like the following:
<div class="ui dropdown selection" tabindex="0">
<select>
<option value="1">Email</option>
<option value="2">Text</option>
</select>
<i class="dropdown icon"></i>
<div class="text">Email</div>
<div class="menu" tabindex="-1">
<div class="item active selected" data-value="1">Email</div>
<div class="item" data-value="2">Text</div>
</div></div>
The result is a big UI box like control showing "Email" and when you click on it, nothing happens.
I think the problem maybe the "selection" class added to the end of the top level div. Just my guess.
Could anyone point out where I did wrong? Really want to get this working. Love the semantic ui dropdown solution.
found the cause of this problem.
semantic-ui-dropdown has an dependency on semantic-ui-transition...
just reference semantic-ui-transition before semantic-ui-dropdown will do.
just add this to the end script in your index.html
<script>
function callDropdown(){
$('.ui.dropdown')
.dropdown();
}
setTimeout(callDropdown, 3000);
I am trying to provide my users with 2 ways to filter a list; either by a data-filter and by a couple of buttons.
The buttons use class attributes to remove groups of list items. In my real application, there are about 8 categories that I need to switch between; or show them all.
So I wrote the routine 'filterCategories' which .hide() all of the items, then .show() just the category that I want to display. This works fine. (I can't use nested lists because the items are arranged in a specific order - not in category order)
However, after I .hide() and .show(), the data-filter no longer works on the items that were hidden. The .hide() seems to remove the items from the listview-filter.
I have tried a listview('refresh') and that does not help.
Is there some other way to do this?
Thanks,
Jeff
(cut down version below... click on "Remove 10s" then type 22 in the search bar. Only "Item 22" should appear. )
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<script type="text/javascript" >
function filterCategories(showme){
if (showme == 'all') {
$('li.all').show();
} else {
$('li.all').hide();
$('li.'+showme).show();
}
$('#itemResults').listview('refresh');
}
$( '#Page1' ).live( 'pageinit',function(event){
});
</script>
<body>
<div data-role="page" id="Page1">
<div data-role="content">
<ul data-role="listview" id="itemResults" data-filter="true">
<li class="" onclick="filterCategories( '20s' );">Remove 10s</li>
<li class="" onclick="filterCategories( '10s' );">Remove 20s</li>
<li class="all 10s" >Item 11</li>
<li class="all 20s" >Item 22</li>
<li class="all 10s" >Item 13</li>
<li class="all 20s" >Item 24</li>
<li class="all 10s" >Item 15</li>
<li class="all 20s" >Item 26</li>
</ul>
</div>
</div>
</body>
</html>
I had the exact same problem and after much troubleshooting I found the solution:
Rather than using $('li-element').hide() or .show(), you must add or remove class "ui-screen-hidden".
$('li-element').removeClass("ui-screen-hidden");
OR
$('li-element').addClass("ui-screen-hidden");
Having trouble constructing a button dynamically with jQuery Mobile. Copy and run. See notes in code.
<!DOCTYPE html>
<html>
<head>
<title>MSC Pre-Close Application</title>
<meta charset="utf-8"/>
<!-- standard Jquery/jQuery Mobile Libraries -->
<script src="jquery.mobile/jquery.js"></script>
<script src="jquery.mobile/jquery.mobile.js"></script>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile.css" />
<BR/>
<div data-role="page" id="mainmenu">
<div data-role="header" data-position="inline">
<h1>Main Menu</h1>
</div>
<div class="ui-body ui-body-c">
<div data-role="content">
<div class="ui-block-a"><button id="click_me" type="submit" data-theme="a" data-icon="home">Click me to change the button to my right</button></div>
<div class="ui-block-a"><button class="cl_pre_phone1" type="submit" rel="external" data-theme="a" data-icon="home">Primary Phone</button></div>
<script>
$(document).ready(function()
{
// this changes the label but not the href action.
$(".cl_pre_phone1").html("<a href='google.com'> Google</a>");
$("#click_me").click(function() {
alert("this should change the text and href of the button!");
// here I would like to change the value as well as the href action, but it does not work.
$(".cl_pre_phone1").html("<a href='yahoo.com'>Yahoo</a>");
//$(".cl_pre_phone1").append("<a href='yahoo.com'>Yahoo</a>");
//$(".cl_pre_phone1").append("<a href='yahoo.com'>Yahoo</a>").reload(true);
});
});
</script>
You're getting messed up by the enhancement which jQM does. Your button is getting rewritten to:
<span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Primary Phone</span>
<span class="ui-icon ui-icon-home ui-icon-shadow"></span></span>
<button class="cl_pre_phone1 ui-btn-hidden" type="submit" data-theme="a" data-icon="home" aria-disabled="false">Primary Phone</button>
One way round this would be to change the call inside the callback to:
$(".cl_pre_phone1").attr("href", "http://yahoo.com").parent().find(".ui-btn-text").text("Yahoo");
or you could replace the whole ui-block-a div.
I am trying to use the Dojo/Dijit declarative menu with Spring ROO 1.1.4, but even if I replace the complete roo generated menue.jspx with the example (ligthly addapted) from the Dojo/Dijit hompage, it does not replace the decorated menu divs with the menu.
that is how it look
that is how should look:
My modified menu.jspx
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:menu="urn:jsptagdir:/WEB-INF/tags/menu"
xmlns:sec="http://www.springframework.org/security/tags"
version="2.0">
<jsp:directive.page contentType="text/html;charset=UTF-8" />
<jsp:output omit-xml-declaration="yes" />
<script type="text/javascript">
dojo.require("dijit.MenuBar");
dojo.require("dijit.PopupMenuBarItem");
dojo.require("dijit.Menu");
dojo.require("dijit.MenuItem");
dojo.require("dijit.PopupMenuItem");
</script>
</head>
<div dojoType="dijit.MenuBar" id="navMenu">
<div dojoType="dijit.PopupMenuBarItem">
<span>
File
</span>
<div dojoType="dijit.Menu" id="fileMenu">
<div dojoType="dijit.MenuItem" onClick="alert('file 1')">
File #1
</div>
<div dojoType="dijit.MenuItem" onClick="alert('file 2')">
File #2
</div>
</div>
</div>
<div dojoType="dijit.PopupMenuBarItem">
<span>
Edit
</span>
<div dojoType="dijit.Menu" id="editMenu">
<div dojoType="dijit.MenuItem" onClick="alert('edit 1')">
Edit #1
</div>
<div dojoType="dijit.MenuItem" onClick="alert('edit 2')">
Edit #2
</div>
</div>
</div>
</div>
</jsp:root>
Can anybody give me a hint what I am doing wrong?
(I know the fallback to do the menu programmatic, but I want to do it declarative.)
The html header is looks like that:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
...
<script type="text/javascript">var djConfig = {parseOnLoad: false, isDebug: false, locale: '${fn:toLowerCase(userLocale)}'};</script>
<script src="${dojo_url}" type="text/javascript"><!-- required for FF3 and Opera --></script>
<script src="${spring_url}" type="text/javascript"><!-- /required for FF3 and Opera --></script>
<script src="${spring_dojo_url}" type="text/javascript"><!-- required for FF3 and Opera --></script>
<script language="JavaScript" type="text/javascript">dojo.require("dojo.parser");</script>
<spring:message code="application_name" var="app_name"/>
<title><spring:message code="welcome_h3" arguments="${app_name}" /></title>
</head>
I don't knows anything about Spring Roo, so maybe I'm saying something very stupid here...
Is that menu.jspx compiling into some static html? If this is the case, you can tell Dojo to parse your initial page simply by setting parseOnLoad to true on your djConfig
var djConfig = {parseOnLoad: true, ...}
(no need to require dojo.parser in this case).
On the other hand, if that template is inserted dinamicaly, you will need to call dojo.parser.parse() on the root 'navMenu' node yourself. You seem to be require-ing it, but I don't see where it is being called.
I had to use:
{
dojo.addOnLoad(function(){
dojo.parser.parse();
});
}
instead of parseOnLoad:true