I am having problems with the Intel AppFramework. I can not seem to get the sidemenu working.
It is working fine on the demo you can download from the AppFramework website, but no matter how well I am trying to mimic it - I can't get the sidemenu to work on my project.
Everything is working fine until I add tags as that is how you make a sidemenu. When those tags are added the whole app will render blank / white and an error pops up into console saying "Uncaught TypeError: Cannot read property 'hideScrollbars' of undefined".
It has something to do with appframework.ui.js' line 1100 that saysthis.scrollingDivs.menu_scroller.hideScrollbars();
So it seems like this menu_scroller is undefined for some reason.
This is as much code as I can give you, it is the index.html of my AppFramework / Phonegap app: http://pastebin.com/dXtTeiKx
Console does not say about any missing files (except cordova.js which is fine because PC) nor does it throw any other JavaScript errors other than the one I told you, so I would assume there is no need for me to post the code in every other file.
I have tried the tags with AppFramework version 3.0.
I have also tried switching the JavaScript includes around a bit, including appframework.ui before appframework and putting some includes to the bottom of the index.html, but none if these have resolved the issue so far.
I also tried removing all excess css and js includes but that did not work either.
This has lead me to believe there is some kind of bug within the AppFramework itself or I am just doing something horribly wrong or have overseen something.
Here is the documentation for the AppFrameworks sidemenu: http://app-framework-software.intel.com/documentation.php#afui/afui_side and as you can see, it should not require anything else than including that nav thing to the source, hell I even tried copying the whole
<nav id="leftMenu" class="view">
<header><h1>Left Menu</h1></header>
<div class="pages">
<div class="panel active">
This is the left menu
</div>
</div>
</nav>
...but that changed nothing.
So I have successfully resolved the issue by myself. I don't know what kind of wizardry AppFramework does on the background, but the issue that caused the nav not work for me was that I had a panel defined like so:
<div data-title="Main menu" id="menu" class="panel" data-footer = "main_footer" data-header = "main_header" data-nav = "main_leftmenu">
This is the main menu
</div>
The nav was correctly defined like so:
<nav class = "view" id = "main_leftmenu">
<ul class = "list">
<li>asd</li>
<li>asd</li>
<li>asd</li>
</ul>
</nav>
The problem was with the panel like I said; as you can see it has an id of "menu" - this is what broke the nav. "Menu" as an id for a panel is most likely a preserved word or something, so it should not be used.
I am suggesting that if you use AppFramework, you should prefix everything (especially panels) with something like so:
<div data-title="Main menu" id="f_main_menu" class="panel" data-footer = "main_footer" data-header = "main_header" data-nav = "main_leftmenu">
This is the main menu
</div>
Here I prefixed the "main" panel with "f_" prefix (there is "_main" as well, but that's just extra so it tells about the panel more).
So in short
Prefix your panel ids and do not give any of them an id of "main" or "menu". Use something like "x_main" and "x_menu" instead.
Related
I know it has been explained in many places here but I can't get it to work.
It concerns: how to use JavaScript which is in - under wwwroot created - folder in a *.js file.
What I am using:
Blazor Server App empty (VS2022, C#).
I only need/use Server App in VS2022 C# and empty - without any predefined navbars and other elements. So there are no any *.cshtml files except one which is automatically created while creating a "Blazor Server App Empty" in VS 2022 and that is "_Host.cshtml"
And I don't want to use any other template in VS 2022, only this one mentioned.
So, after creating a "page" using this in VS integrated template, I added following in MainLayout.razor (I am using *razor and only razor - no any cshtml):
// this was originally created as in the template in VS2022
#inherits LayoutComponentBase
//this one also:
<main> #Body </main>
// That is what I added here in MainLayout.razor, it's from this site: [http://jsfiddle.net/Ag47D/3/](https://www.stackoverflow.com/)
<div class="navbar">
<div class="navbar-fixed-top">
<div class="container" style="width: auto;">
<div class="nav-collapse" id="nav-collapse">
<ul class="nav" id="nav">
<li id="home">Home</li>
<li id="skill">Skill</li>
<li id="research">Research</li>
<li id="link">Link</li>
</ul>
</div>
</div>
</div>
</div>
And then I added the css part to the existing "site.css" in that simply VS 2022 project:
`.navbar #nav > .active > a {
color: red;
}`
And finally - and that is the big issue for me to understand WHRE/HOW to handle that . a simply JavaScript part (you can find that on the same site mentioned):
` $(function() {
$('#nav li a').click(function() {
$('#nav li').removeClass();
$($(this).attr('href')).addClass('active');
});
});`
I added that to a created folder in wwwroot, the flder is called: "js" and the file inside that folder is called: "setactivetab.js". In that file is the mentioned part of javascript.
In "_Host.cshtml" I added then that, here the part of that _Host.cshtml where you can see what I added:
`....
....
Reload
<a class="dismiss">🗙</a>
</div>
<script src="~js/setactivetab.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>`
So I tried with:
<script src="~js/setactivetab.js"></script>
and:
<script src="js/setactivetab.js"></script>
and:
<script src="~/js/setactivetab.js"></script>
But nothing worked. I mean: TABS are shown on the page - no question about that - but if I click on one of that TABs - nothing happens, the color isn't changed.
Somehow I am not able to understand how to use a self created/from google downloaded, JavaScript for simply changing of the color or to set a selected TAB as active/current or however we can use that.
I tried so many examples described on the web. I can't get that working - maybe I am missing/not understood some fundamental knowledge of using a JavaScript. I simply don't know the way how one can use that.
Can you please post me here a working example of a navigation TABS, ideally self created and simply? Important is: WHERE to put a javascript and how to access that properly so the clicking on a TAB wil lchange his color and stay so until I click on another TAB in a simply - if possible: horizontal, not vertical, navigation bar.
I have enough from searching/reading of many web sites descriptions as there works all and if I copy&paste some simply example, it doesn't work.
I have a code block like this,
{#if categoryArray}
<div class="searchCategoriesBottom">
<div class="search-form" on:keydown>
<ul class="categoryListUl">
{#each categoryArray as catName, index}
<li
class="categoryLi"
on:focus={dispatch('click', catName)}
on:click={openSelectedCat}
>
<span class="categoryDescription">{catName}</span>
</li>
{/each}
</ul>
</div>
</div>
{/if}
I want a container to be opened under it when the "li" element is clicked on mobile phones. When I tried it in Chrome, safari browser, there was no problem, but when I tried it from Firefox browser on my computer, I got this error and the subcategory does not open.
I'm just using on:click. I don't understand why this error occurs. Can anybody help me ? Thanks :)
That code is injected by the dev tools to simulate touch interactions (as the name of the file in the warning indicates). You can click that file link and see the exact code used.
The click should still work, though, at least I cannot reproduce the issue. This is not an error.
(By the way, in general you should only add click handler to interactive elements that are supposed to be clicked, i.e. form elements like button. Otherwise the result will be not accessible.)
I'm working with a third-party code and I'm quite limited in terms of filtering a list of elements.
Each of these elements has this structure:
<div class="item-preview">
<div class="item-info">
<div class="tag">
<svg class="tag-public"></svg>
</div>
</div>
</div>
The only thing that changes is the svg class, so it's whether tag-public or tag-private. Depending on the user type that's checking the content, I'd like to hide it when it's tag-private. I've tried this:
$('.tag-private').closest('.item-preview').hide();
And this:
$('.tag-private').parents('.item-preview').hide();
But any of them works. The code uses React and the items are brought by JSON/AJAX, so I guess the problem is related to trying to modify the page once is loaded...
Any thoughts on how to make my JS "override" the original code? Thanks a ton.
So, I run my church's website and I try to stay pretty basic in the coding, but we have seasonal pages that we add and remove from the website all the time so I get tired of changing the "simple" HTML code on every page for the nav bar. I have found where I can use PHP and have one code, like but is it possible to have the current page highlighted, i.e. on our website now, the current page name is bold and a different color.
I have also seen JS do this (Highlighting current page in the nav) but I don't really understand how to implement this, so if you think this could be the better route for me, and can help explain how to do it, that would be cool.
Any help would be great!
add an id attribute to the body tag of each of your pages, like this:
<body id="home"> <!-- this would be for your home page for example -->
...
<body id="about"> <!-- this would be for your about page... -->
add the same to the li tags of your nav, like this:
<li id="home">Home</li>
<li id="about">About</li>
then in the CSS file just do this:
body#home li#home, body#about li#about { // style of the active menu item }
BACKGROUND
I am writing an MVC 4 / jQuery Mobile site. I have a Header.cshtml shared view defined like this:
#model string
<div data-role="header" data-position="fixed">
<a data-rel="back" href="javascript:history.back()">Go back</a>
<h1>#Model</h1>
#Html.ActionLink("Home", "Index", "Home", null, new
{
data_icon = "home",
#class = "ui-btn-right jqm-home"
})
</div>
which I call like this:
#Html.Partial("Header", "Registration")
PROBLEM
The above runs fine in my desktop browser, but when I test using Mobilizer (http://www.springbox.com/about/tools/), it seems that history.back() does not work on mobiles. So then I thought.. okay, there's always more than 1 way to get things done.. so I tried this:
<a data-rel="back" href="#Request.UrlReferrer">Go back</a>
Strangely, that doesn't work either and I don't know why. I am guessing that UrlReferrer is calling something in the browser and the mobile browser does not support it. Unfortunately, I cannot actually test that theory as Mobilizer does not seem to let me inspect the page source.
In any case, I need a solution.. of course I could stop using this generic shared view and copy-paste it to everywhere instead, but needless to say that would suck... Can anyone tell me how to solve this one, so I can re-use my header code?
EDIT
At first I thought #DWolf had solved the problem. But now I see it hasn't.
I have checked and confirmed that Mobilizer is not the problem. I did this by testing a different emulator. In this case, ElectricPlum's iPhone simulator:
http://www.hanselman.com/blog/SimulatingAnIPhoneOrIPadBrowserForASPNETMobileWebDevelopmentWithWebMatrix2OrVisualStudio2012.aspx
So, data-add-back-btn="true" also does not work. It does seem odd though that a built-in function of jQuery Mobile for back buttons does not work... What is that?!?!? HELP!
jquery mobile keeps the page cached, so if you flip from page 1 to page 2, it shows page 2, but it keeps on to page 1 behind the scenes
if you add
data-add-back-btn="true"
to your page
<div data-role="page" id="page2" data-add-back-btn="true" >
it will go back 1 page