I'm developing a web site, and I'm using SemanticUI.
I prepared this example to explain the problem:
<header>
<div class="ui vertical large menu red item page fluid grid">
<div class="mobile only row">
<div class="ui icon dropdown fluid center align massive button">
<i class="content icon"></i>
Menú
<div class="ui vertical menu">
<a class="item" href="#"> Home </a> <!-- ¡¡Repeted link!! -->
</div>
</div>
</div>
</div>
<div class="ui six menu red item fluid grid">
<div class="tablet only row">
<img src="http://goo.gl/ToQcwM" width="20px"/>
<a class="item" href="#"> Home </a> <!-- ¡¡Repeted link!! -->
</div>
<div class="computer only row">
<img src="http://goo.gl/ljDWQ7" width="20px"/>
<a class="item" href="#"> Home </a> <!-- ¡¡Repeted link!! -->
</div>
</div>
</header>
The trouble (SEO problem) is that I have to duplicate the three links above and of course, I don't want to do it. Actually, the site is build with PHP and I don't really doubled code (it's an include in PHP).
I prepared also a fiddle. To test it, you have to redimension the window in order to see the effects.
Of course, this is not the real situation. You can see the real web if you want.
So, anyone with a solution? best practices about this?
PD: Sorry for my english! :)
Finally, I just maintain one div with all links not repeated and then with CSS style that menu for mobiles.
Related
I'm attempting to use a basic Bootstrap carousel in my Rails app and I've copied it over as is:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>
This is currently on a partial page, but I have also tried using the carousel in different HTML pages but to no effect. I also tried using the line of javascript offered on the Bootstrap site:
$('.carousel').carousel()
...but this also made no difference. I was expecting to get something resembling an empty Bootstrap Carousel, but what I get in my page is three failed image icons with 'first slide', 'second slide' and 'third slide' next to them. It looks as though Bootstrap is not working at all, but I have already used it in this app for a Navbar and a Jumbotron, which were both successful.
This may be something quite simple, but I'm unable to find out what the problem is, so I would really appreciate some help :-)
I'm sorry for what I think is a bad question. Would anyone have an example of how to create something like on the picture, so some sort of tiles, within MVC? This used to be available on https://www.exceptionnotfound.net/asp-net-mvc-demystified-display-and-editortemplates/ but it isn't anymore, and I need to know how to create something like that but haven't been able to find it.
Any help would be appreciated even if it's just the correct name of the above!
It really doesn't matter too much if its in ASP, Java Spring or plain old HTML, this is more related to CSS and Bootstrap rather than ASP.NET MVC.
This is what I would do.
Open up your Views\Home\index.html and you can delete everything and paste something like below (which makes a good starting template) - grabbed from here.
#{
ViewBag.Title = "Home Page";
}
<div class="container">
<div class="row">
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
</div>
</div>
You will get thumbnail style grid which you then need to refine (with CSS) to give it the look and feel that you're after (make you to read bootstrap's documentation).
You don't need to use MVC to create tiles. You can use CSS or Javascript. There are a number of JS/CSS libraries that will allow you to tile your HTML.
I'd post some here, but honestly you should probably just use google to find some js/css tile layout libraries so that you can find one that best fits your needs.
I have been working with MVC for a few months and its going well, but I can't figure out how to create a Sidebar menu all the way to the utmost left of the screen.
This is a standard MVC 5 web application.
What I think the problem is, is that in _Layout View, the
#RenderBody()
falls within the div tag:
<div class="container body-content">
So all code in any of my created Views is contained in that container.
Is this even the reason?
My View:
<h2>TestSideBar</h2>
<div class="container" id="sidebar" style="margin-left: 0px">
<div id="wrapper" class="wrapper">
<!-- Sidebar -->
<div class="nav navbar-left">
<div class="sidebar-wrapper">
<div class="logo">
<a href="#" class="simple-text">
Placeholder
</a>
</div>
<ul class="nav">
<li>
<a href="#Url.Action("Item1", "Controller")">
<span class="glyphicon glyphicon-off "> Item 1</span>
</a>
<a href="#Url.Action("Item2", "Controller")">
<span class="glyphicon glyphicon-star "> Item 2</span>
</a>
</li>
</ul>
</div>
</div><!-- end navbar-left -->
</div><!-- end sidebar container -->
<div class="main-panel">
Main Content Stuff Here
</div><!-- end main-panel -->
</div><!-- end wrapper-->
I have attached 2 images, how it looks now and how I want it to look
I have tried using the #section RenderLeft as well.
I just can't get it to look the way I want.
Thanks.
Well I have found two ways to do this so far. There could be better ones out there.
Firstly I was correct in my assumption that the container div in _Layout View was causing the problem.
Option 1
In the _Layout View, before the container div and RenderBody, use #RenderSection code
#RenderSection("LeftMenu", required: false)
<div class="container body-content">
#RenderBody()
Then in the View you want the menu, enclose the menu code in:
#section LeftMenu{
<!-- Content Here -->
}
The "LeftMenu" is just a name, any name can be used here.
This causes the code in the #section to be "run" before the RenderBody.
This works, but has a drawback in that since I possible want to use the menu in more than one View, I have to add the #section LeftMenu {} code in each View I want it because you cannot use #section {} in a partial view.
Option 2:
In _Layout View, remove the container div that encloses #RenderBody
In each View enclose the code in a container div. Create the menu in a partial view and render it (#Html.Partial) in each view you need it, before the content code.
Neill
You can use Html.RenderPartial
Create a view, e.g: _LeftMenu.csthml and put it in the "Views/Shared" folder.
Put the left menu html in that view, example(this can of course be done with Divs and a Model if you prefer)
<ul class="list-group">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="NextController" asp-action="Index">another menu link</a>
</li>
</ul>
Then divide the content area in your Layout page into two, one for your left menu and the second for the render body area that will contain the child pages:
<body>
<header>
</header
<div class="row col-md-12 FullContent">
<div class="col-md-2 CustomLeftnavbar">
#{Html.RenderPartial("~/Views/Shared/_LeftMenu.cshtml");}
</div>
<div class="container col-md-10">
<main role="main" class="CustomBody">
#RenderBody()
</main>
</div>
</div>
</body>
This way you will not need to go against the DRY principle as it will be shared with any and all other pages that uses the same layout page
We're using Bootstrap 3 (v3.3.5) accordion and it works fine until the screen reader is enabled on the iPad (iOS v9.1). Once the screen reader is enabled, the accordions will no longer expand/collapse for accordions with shorter labels (labels that take up less than 50% of the available space). The shorter label issue is consistent as the screen is rotated between landscape and portrait. The issue can be corrected by making the labels longer than 50% of the available space or centering them. Unfortunately, centering or expanding the label is not an option on our team.
This seems to be a problem with Bootstrap 3 and not Bootstrap 2. I pointed to the bootstrap 2 accordion example here (http://getbootstrap.com/2.3.2/javascript.html#collapse) and enabled the screen reader on the iPad and it worked fine. Then, I pointed to the bootstrap 3 accordion example here (http://getbootstrap.com/javascript/#collapse) and enabled the screen reader on the iPad and it failed to expand/collapse the accordion.
Has anyone found a fix or another workaround? Perhaps, we are missing an attribute to fix the problem or something else.
Here is the code that we're using in our accordion:
<div class="row" id="A">
<div class="col-md-12 col-sm-12 col-xs-12 content">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingA">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#contentA" aria-expanded="false" aria-controls="contentA">This label is to short for any screen
<span class="sr-only sr-only-focusable" id="toggleA">show content</span>
</a>
</h4>
</div>
<div id="contentA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingA">
<div class="panel-body">
<p>This label is to short to expand/collapse this content on any iPad screen with the screen reader enabled.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingB">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#contentB" aria-expanded="false" aria-controls="contentB">This label works on portrait/landscape screen and will expand/collapse accordion
<span class="sr-only sr-only-focusable" id="toggleB">show content</span>
</a>
</h4>
</div>
<div id="contentB" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingB">
<div class="panel-body">
<p>This label is long enough to expand/collapse this content on the iPad portrait and landscape screens with the screen reader enabled.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingC">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#contentC" aria-expanded="false" aria-controls="contentC">This label works on portrait screen not landscape
<span class="sr-only sr-only-focusable" id="toggleC">show content</span>
</a>
</h4>
</div>
<div id="contentC" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingC">
<div class="panel-body">
<p>This label is long enough to expand/collapse this content on the iPad portrait screen but not the landscape with the screen reader enabled.</p>
</div>
</div>
</div>
</div> <!-- End panel group -->
</div>
</div>
Thank you
This might be related to the following bug:
Use of anchors nested in headings causes issues in VoiceOver, promotes anti-pattern usage
anchors within headings(H4) confuse VoiceOver(VO), which:
causes VO to place the VO cursor on the H4 vs. the anchor,
doesn't read any of the aria attributes on the anchor,
breaks the standard VO-Spacebar interaction
I want to create a mobile page for mobiles and tablets. When the user uses a tablet (larger screen), the left panel-navigation should stay open all time. When the user uses a mobile phone (smaller screen) there should be only a button top-left to open the panel.
Jquery has a demo, but obviously it is not working:
http://demos.jquerymobile.com/1.4.5/panel-responsive/
I tried the demo on JSfiddle but it also did not work:
<div data-role="page" class="jqm-demos ui-responsive-panel" id="panel-responsive-page1" data-title="Panel responsive page">
<div data-role="header">
<h1>Panel responsive</h1>
Menu
Add
</div><!-- /header -->
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h1>Panel responsive</h1>
<p>This is a typical page that has two buttons in the header bar that open panels. The left panel has the push display mode, the right panel reveal. To make this responsive, you can make the page re-flow at wider widths. This allows both the panel menu and page to be used together when more space is available. This behavior is controlled by CSS media queries. You can create a custom one for a specific breakpoint or use the breakpoint preset by adding the <code>class="ui-responsive-panel"</code> to the page container. We have added this class on this demo page. Note that when using the preset class, we also hide the dismiss layer on wider screens if the panel has the push display mode.</p>
<div data-demo-html="#panel-responsive-page1"></div><!--/demo-html -->
<br>
<br>
<br>
<br>
<br>
Back
</div><!-- /content -->
<div data-role="panel" data-display="push" data-theme="b" id="nav-panel">
<ul data-role="listview">
<li data-icon="delete">Close menu</li>
<li>Accordion</li>
<li>Ajax Navigation</li>
<li>Autocomplete</li>
<li>Buttons</li>
<li>Checkboxes</li>
<li>Collapsibles</li>
<li>Controlgroup</li>
<li>Dialogs</li>
<li>Fixed toolbars</li>
<li>Flip switch toggle</li>
<li>Footer toolbar</li>
<li>Form elements</li>
<li>Grids</li>
<li>Header toolbar</li>
<li>Icons</li>
<li>Links</li>
<li>Listviews</li>
<li>Loader overlay</li>
<li>Navbar</li>
<li>Navbar, persistent</li>
<li>Pages</li>
<li>New</li>
<li>Popup</li>
<li>Radio buttons</li>
<li>Select</li>
<li>Slider, single</li>
<li>New</li>
<li>New</li>
<li>New</li>
<li>Text inputs & textarea</li>
<li>Transitions</li>
</ul>
</div><!-- /panel -->
<div data-role="panel" data-position="right" data-display="reveal" data-theme="a" id="add-form">
<form class="userform">
<h2>Login</h2>
<label for="name">Username:</label>
<input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">
<div class="ui-grid-a">
<div class="ui-block-a">Cancel</div>
<div class="ui-block-b">Save</div>
</div>
</form>
</div><!-- /panel -->
</div><!-- /page -->
<div data-role="page" id="panel-responsive-page2">
<div data-role="header">
<h1>Landing page</h1>
</div><!-- /header -->
<div role="main" class="ui-content jqm-content">
<p>This is just a landing page.</p>
Back
</div><!-- /content -->
</div><!-- /page -->
http://jsfiddle.net/84m0b2au/
I searched a long time, found a half-working JS solution, but the panel does not stay open when i change the pages, only when i reload the page. I found some similar questions, obviousl it is an issue, but nowhere is a (for me) working solution.
So my question is, how can i solve the problem. The best way is to find a CSS-only solution.
Thank you very much for your tips.