I am trying to use bootstrap's carousel inside an angular.dart component. Here is the html:
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol ng-repeat="pic in ctrl.pics" class="carousel-indicators">
<li data-target="#carousel" data-slide-to="{{ $index }}" ng-class="{ active: {{$first}} }"></li>
</ol>
<!-- Slides -->
<div ng-repeat="pic in ctrl.pics" class="carousel-inner">
<div class="item" ng-class="{ active: {{$first}} }">
<img src="{{ ctrl.pic.image }}">
<div class="carousel-caption">{{ ctrl.pic.title }}</div>
</div>
</div>
<!-- Controls -->
<a id="carousel-control-left" class="left carousel-control" href="#carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a id="carousel-control-right" class="right carousel-control" href="#carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
The prev/next controls don't work (maybe other things too), probably because the href attributes are wrong. I tried to fix them by updating the hrefs at run time, but I don't know how to enter a url pointing to an id that is inside shadow dom.
Alternatively, I tried to add event listeners that would use dart:js to call the carousel('prev') and carousel('next') bootstrap functions. This approach failed too because I don't know how to pass the shadow dom root reference from dart to javascript.
Any suggestions?
There may be two issues:
JavaScript tries to querySelect() an element and can't find it because it's hidden in the shadowDOM
you could change the JavaScript code
The CSS doesn't work because you haven't added applyAuthorStyles: true to your AngularDart component.
Currently Angular UI Bootstrap components are being ported to Angular Dart
see https://github.com/akserg/angular.dart.ui
Carousel is not yet working AFAIK
Related
I will be creating left vertical (sidebar) navigation menu by referring "Example" in https://getbootstrap.com/docs/5.0/components/accordion/.
Below is the link where sub menu items are present as Subitem 1, Subitem 2, Subitem 3 under item 3 and item 4.
https://www.codeply.com/go/K1gXPZwV59/bootstrap-vertical-sidebar-_-accordion-menu-with-submenus
Could you please help how to create such sub menu items(Subitem 1, Subitem 2, Subitem 3) in the "Example"?
Do you want nested accordions? If so, just nest them. Snippet below uses the "Example" you referred to in your question.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Accordion Item #1 </button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div>
<div class="accordion" id="accordionExampleTwo">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOneOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOneOne" aria-expanded="true" aria-controls="collapseOneOne"> Accordion Item #1-1 </button>
</h2>
<div id="collapseOneOne" class="accordion-collapse collapse" aria-labelledby="headingOneOne" data-bs-parent="#accordionExampleTwo">
<div class="accordion-body">
<strong>This is the first NESTED item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingOneTwo">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOneTwo" aria-expanded="true" aria-controls="collapseOneTwo"> Accordion Item #1-2 </button>
</h2>
<div id="collapseOneTwo" class="accordion-collapse collapse" aria-labelledby="headingOneTwo" data-bs-parent="#accordionExampleTwo">
<div class="accordion-body">
<strong>This is the second NESTED item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Accordion Item #2 </button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div>
</div>
</div>
</div>
If you want a list group menu inside the accordion:
.accordion-body {
/*padding: 0 !important;*/
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!--- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.2/font/bootstrap-icons.css">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="list-group">
The current link item <i class="bi bi-caret-down-fill"></i>
<div class="collapse" id="listCollapseOne">
A nested first link item
A nested second link item
A nested third link item
</div>
A second link item
A third link item
A fourth link item
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
I'm using foundation 6 to make an ajax powered site. The index page uses off canvas and tabs for navigation. But when I added the jquery datepicker widget and the corresponding css, it is adversely affecting the appearance of my navigation bar.
I make no reference to the ui classes in my navigation source code, but foundation or something is putting them into the served version.
for example:
source code snippet:
<li>
<a id="select-sections" href="#tabs-2" class="hollow button secondary disabled" data-open="offCanvasLeft">
§§
</a>
</li>
but firebug shows:
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="select-sections" aria-selected="false" aria-expanded="false">
<a id="select-sections" class="hollow button secondary disabled ui-tabs-anchor" href="#tabs-2" data-open="offCanvasLeft" role="presentation" tabindex="-1" aria-expanded="false" aria-controls="offCanvasLeft"> §§ </a>
</li>
Obviously, when I add the CSS for datepicker widget, It's using css styles that I never intended to use on my menus. I really don't want it to add stuff like "ui-state-default" and "ui-corner-top" to my code.
Two possible ways I can see to potentially solve the problem, just don't know how to accomplish it:
Somehow prevent the addition of ui-* classes to my navigation
Somehow make the css apply only to the datepicker
If it helps, here is a simplified listing
<body>
<div class="full-height">
<div id="topbar" class="top-bar">
<div class="top-bar-title"> The site title... </div>
<div>
<div id="top-bar-left-content" class="top-bar-left"></div>
<div id-"top-bar-right-content" class="top-bar-right">
<form>
<ul class="logged_in menu">
<li>Date: </li>
<li><input type="text" id="datepicker" name="today" value="<%= #today %>"></li>
<li><input class="button primary" type="submit" value="Change Date"></li>
<li><button id="select-help" class="button primary">Help</button></li>
</ul>
</form>
</div>
</div>
</div>
<span id="notice"><%= notice %></span>
<!-- wrap entire document (2 divs) -->
<div class="off-canvas-wrapper container"><div class="off-canvas-wrapper-inner fill" data-off-canvas-wrapper>
<!-- tabs wrap around off-canvas and off-canvas data. using .tabs class distorts display. -->
<div id="tabs" class="fill ">
<!-- off canvas left (hidden) part -->
<div id="offCanvasLeft" class="off-canvas position-left fill" data-off-canvas data-close-on-click=false>
<!-- tabs content -->
<aside>
<div id="tabs-1">A list of links...</div>
<div id="tabs-2">A list of links...</div>
<div id="tabs-3">A list of links...</div>
<div id="tabs-4">A list of links...</div>
<div id="tabs-5">A list of links...</div>
</aside>
</div><!-- end off canvas left -->
<!-- rest of the page (on canvas) -->
<div id="left-scroll" class="off-canvas-content rows fill" data-off-canvas-content>
<!-- sidebar icons. these select the tab to display -->
<ul id="sidebar-closed" class="menu vertical sidebar-closed">
<!-- toggle sidebar -->
<li id="toggle-oc">
<a class="hollow button secondary" data-toggle="offCanvasLeft">
<i id="toggle-menu" class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</li>
<!-- search -->
<li>
<a id="select-search" href="#tabs-3" class="hollow button secondary is-active" data-open="offCanvasLeft">
<i class=" fa fa-search" aria-hidden="true"></i>
</a>
</li>
<!-- part list -->
<li>
<a id="select-parts" href="#tabs-1" class="hollow button secondary" data-open="offCanvasLeft">
<i class=" fa fa-list" aria-hidden="true"></i>
</a>
</li>
<!-- section list -->
<li>
<a id="select-sections" href="#tabs-2" class="hollow button secondary disabled" data-open="offCanvasLeft">
§§
</a>
</li>
<!-- letter list -->
<li>
<a id="select-letters-list" href="#tabs-4" class="hollow button secondary disabled" data-open="offCanvasLeft"><!-- data-pushstate="/sidebar_actions/letters" -->
<i class=" fa fa-files-o" aria-hidden="true"></i>
</a>
</li>
</ul>
<!-- main window content -->
<main>
links in the tabs are displayed here
</main>
</div><!-- rest of page (on canvas) wrapper -->
</div> <!-- tabs wrapper -->
</div></div> <!-- outer 2 off-canvas wrappers -->
</body>
and the css is loaded via application.css.scss:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*= require foundation_and_overrides
*= require jquery-ui/datepicker
*= require font-awesome
*/
I made the css apply only to the datepicker widget. For Ror:
Use firebug to determine the id of the wrapping div.
Use jQuery Download Builder to generate the CSS you need. Add id from step 1 to the CSS Scope input.
Remove *= require jquery-ui/datepicker from application.css.scss
Make new file in app/assets/stylesheets and paste generated stylesheet
Change any references to url(images/* to url(/images/*
Copy required images to public/images/
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.
Hello I am working a basic rails app, and I want to include a welcome page with a slideshow. How would I implement this in a Rails app? I am new to Rails, and I tried using Jquery, but it didn't work. I am also using bootstrap on my website.The problem is that the images wont load and I only see the arrow buttons and no images.
Thanks! Here is my code,
<script>
$(function(){
$('#myCarousel').carousel();
});
</script>
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><img src='pictwo.png'></div>
<div class="item"><img src='pictone.png'></div>
<div class="item">…</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Twitter bootstrap incudes one, as well as provides examples on its usage - http://twitter.github.io/bootstrap/javascript.html#carousel.
We just updated from jquery mobile beta 2 to rc2. We had a custom button that we don't want jqm to initialize (add extra markup) so we used this:
<button id="buttonid" data-role="none"></button>
And that worked perfectly, but now with the update it is actually initializing the button. I don't see any updates in the release notes or the documentation. Am I missing something?
Markup after update:
<div data-theme="c" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-down-c ui-btn-up-c" aria-disabled="false">
<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
<span class="ui-btn-text"></span>
</span>
<button id="buttonid" data-role="none" class="ui-btn-hidden" aria-disabled="false"></button>
</div>
UPDATE
As Phill pointed out, my problem is hard to reproduce. Could be something with my code but it seems strange that simple changing version creates the behaviour for me. Here is additional markup that I first stripped out from example:
<ul class="item" data-role="listview" data-inset="true">
<li data-role="list-divider">Something</li>
<li>
<div class="block_container" data-role="none">
<div class="block block_small">
<button data-role="none" id="check-123" class="check" data-id="something"></button>
</div>
<div class="block block_small assignment">
<button data-role="none" id="assign-123" class="assignmentoverlay"></button>
</div>
<div class="block">
<h3>
Something
</h3>
<p>
lorem..
</p>
</div>
</div>
</li>
UPDATE 2
I found what the problem is. I am populating my list from javascript. At the end I'm calling trigger("create"). This will enhance all the elements in my list, even those with data-role="none.
jsfiddle to reproduce problem - http://jsfiddle.net/V2xAX/9/
Updating title of question
UPDATE 3
Hopefully the last update. We got it to work by doing the following:
When calling trigger("create")on my list, every element will be enhanced. We don't want this.
When calling trigger("create")on the page element holding the jquery mobile page, only elements without data-role="none"will be enhanced. This is the behavior we want.
Link for testing - http://jsfiddle.net/V2xAX/16/
It would be interesting to know why this happens :)