Here is a link of the problem: http://jsfiddle.net/Rgd7Z/1/
The project uses ionicframework and angular(basically none yet) to create a simple swiping/sidemenu app. There are two pages that the user can swipe between with a header/navbar, then all of this moves over for the sidemenu.
I am attempting to use <ion-header-bar> in place of the <ion-nav-bar> so it will move with the sidemenu, but the buttons and text do not line up correctly. Am I missing some class on the buttons? I tried wrapping them all in on div with class="buttons" after checking the inspector, but that didn't work either.
Is the way that I am using the common method for a nav-bar that is going to be moved by the sidebar?
check out the updated jsfiddle
you needed to use <ion-header-bar type="bar-dark"> not <ion-header-bar="bar-dark">
Related
I need this kind of behavior like when we click on make we can open the next model list in the same section
Please can you help me with how I can achieve this?
Im not sure about vanilla js but u can achieve this in ReactJS using react-router-dom package. you can add Link to each section which will replace that modal in the section without page reloading/refreshing.
Edit:
I have 2 ideas to to this with vanilla js but its a bit complicated and confusing.
using appenChild() change section child with onclick.
adding display: none to all and changing display: block for the once to display
this will not change reload or take to new page but u will need to add js for onclick for each route/model
Is there a way to specify the ion-loading container in ionic? The backdrop always blocks the whole app.
I have a few content parts in my SPA. Now when I want to update a specific part of the view, I would like to show ion-loading only in that specific part and not block the whole app.
Thanks for any help!
Add this component where you need
<ion-spinner></ion-spinner>
you can use ion loading which you can customize with loading message as well. refer the official documentation. you can see many other options such as skeleton-text, progress bar and spinner as well.
I'm trying to use a ui kit (http://demos.creative-tim.com/material-kit/components-documentation.html#checkbox-row) and it's have several js files, jquery, bootstrap, its own etc. I included them in the index.html and works well if the checkbox or other visual element is on the page at start.
But when i hide a div under ngIf with the checkboxes, and a button toggle shows this div later, it's visual element what the js files adds to it, doesn't do they job and i don't see the fancy checkboxes.
As i think, the external libs right part should be initialized when the hidden div comes visible.
How could i overcome with this issue? (i am using angular 4 with server side rendering)
when i hide a div under ngIf
The *ngIf directive does not hide the div, it removes or adds it to the DOM which is probably why you're having initialization issues. Try binding to [hidden] instead.
I've been trying for weeks to build a navigation sidebar like these images:
I'm using twitter bootstrap, however, even though their getbootstrap.com/components has a very good looking navigation sidebar, there is no such component in their library and it is so much pain to build one. Therefore, I resorted to using jquery in my attempt to build one like the Tommy Hilfiger's global site.
Tommy Hilfiger's Global Site
However, I'm new with javascript and css... they are my weakpoints... especially if they are minified :( and I'm stuck at trying to make the arrow marker and have it move along (animating) and always pointing to the current section. I managed to animate the page scrolling though, and my WIP so far is here:
WIP - Twitter Bootstrap Navigation Sidebar
Is there any open source components (or preferably bootstrap ones) to achieve that section indicator animation?
I'm so confused with my scripts that are getting messier, so open source component is highly desireble, however, any input on how to achieve it (with script example please) will also be appreciated.. Thank you very much in advance!
Check out ScrollSpy, the component exist on bootstrap itself:
bootstrap scrollspy
extracted from:
https://stackoverflow.com/a/14366014/474330
So you need to use the scroll spy activate event described here:
http://twitter.github.com/bootstrap/javascript.html#scrollspy
Basically you need some code like so:
$(function() {
var $spy = $('.nav.nav-pills');
$spy.scrollspy({offset: 20});
$spy.bind("activate", function(e) {
// do stuff here when a new section is in view
});
});
Here is a working example:
http://jsfiddle.net/hajpoj/f2z6u/3/
please ignore the fact that it starts at the bottom... not sure if that a unrelated or related bug, but the main point is you can see how the activate event works
I have a problem with the execution of JavaScript within a collapsible-set. I want to run inside the collapsible-set some kind of carousel effect.
But unfortunately the code is executed only in the open tab. Opening the other tabs to see there is nothing. Although the initialization of the effect takes place for all elements.
Here you will find the Fiddle
With code: http://jsfiddle.net/2qVBN/4/
Fullscreen: http://jsfiddle.net/2qVBN/4/embedded/result/
There are also problems with the re-initialization of the code when you switch between portrait and landscape mode.
Does anyone have any idea how I can make sure that the code inside the collapsibles is always loaded and executed?
Thanks in advance
vis_dev
here JS on the divs which are displayed none can not be applyed.
In your case I suggest, you can expand each of your collapsible div by js and apply js to that.
thats how you can expand your collapsible div.
$('div').trigger('expand');
jsfiddle example