I'm creating a single page web app using AngularJs and I am having trouble with showing information as if they were in different panels.
So basically each panel contains text and photos, basic information slides. I am currently showing and hiding these using a left and right arrow.
But when I go from one panel to the next, the next div is scrolled to the bottom of the div.
On the click of the next arrow, I also need the next div to be at the top no matter what.
Any help would be appreciated.
As #ferTo says, you should provide some code for us to comment on. Assuming you are using ui-router (which I have no idea in practise) then you will want to turn off autoscroll
<div ui-view autoscroll="false"></div>
Related
I'm looking for a good way to realize a sort of breadcrumb navigation through a database using Semantic-UI (on top of Django, if that matters). The idea is to click on a link toggling the first sidebar, showing a dataset with in a form with each data offering a link to dig further down, opening the dug down data in another sidebar, shifting the parent further to the left. So in the end you end up with a horizontal "timeline" of sorts, made up of sidebars (or something else) that the user can then step back through, shifting everything back to the right.
The default sidebars seem to always overlay each other, so basically the question is, how do you make new sidebars shift existing ones?
Here is what I am talking about:
When you visit https://soundcloud.com/ , when you look at the homepage you see the whole "Connect on Soundcloud" thing.
The texts and buttons on the screen in that confined space scrolls by itself in a given amount of time. It also has those two small white circle buttons that tell you which item it is on(the first white circle gets filled in while the other one is hollowed out with a border when the user is looking at "Connect on SoundCloud" and the other way around when it is on "Discover more with SoundCloud GO+").
How is this made?
Thank you!
You should take a look at Carousels on w3schools, they cover this pretty well.
Bootstrap brings functions and html attributes for building components that slide though elements. Elements not currently visible are pushed off the view with CSS and visible ones can slide into view.
That is called carousel, and it is part of many frameworks/libraries like Bootstap. Some frameworks/libraries call it gallery.
In my webpage right now I have three buttons each filling a third of the page width and all the page height. i want to make it so if I click on the first button the second two slide off to the right and the first button remains on the screen, I've done a bit of research and come up with nothing. if you need more information let me know thanks in advance!
You can do this with css and js here is a tutorial from css-tricks
I'm using Bootstrap on a site and on the desktop view I leave the Navigation bar stuck at the top. I'm wanting the section links to leave this gap in place (60px I believe). So when I have a...
Section Link
Is there a way to have it respect the 60px that the top navigation bar consumes?
NOTE: If it's relevant the site is currently using Bootstrap 2, but I'm in the process of moving it to 3. If the solution is different between the two...or if one version inherently does this I'd love to know the differences.
EDIT: I'm wanting the element I'm linking, to have the gap above it not the actual a tag itself. Also, I could care less if it's a JS or CSS solution. If someone has JavaScript disabled I'm fine with the slight annoyance of it's current appearance for them.
Add style="margin-top:60px" to your tag - this will lower its position
or place it inside a div tag
ex:
<div style="top:60px">
Section Link
</div>
EDIT
I hope i understand the question now, if not, sorry
you can put this javascript on the page
if (window.location.href.indexOf('#') != -1){
window.scrollBy(0, -60)
}
this way, the page finds the desired section then scrolls down 60px as soon as it loads, making the section header appear below the Nav bar
We are currently using Dojo to create a mobile map application. We're using Esri for the map service. Everything was working before changing from 3.2 to 3.3. The map works fine but I'm having issues implementing a base map gallery. I've done research for days trying to figure out why my gallery wasn't appearing but I've narrowed down my issue to it actually being the layout of my div tags. On my index.html page I have many div tags for different menu's and what not. I've followed all the div tags to make sure they've all been closed and they have.
So this is what I currently have implemented:
<div id="displayView" data-dojo-type="dojox.mobile.View">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props='fixed:"top", label:"Display Options", back:"Menu",
moveTo:"menuView"'>
<div id="galleryDiv"> </div>
</div>
</div>
With this code, the gallery doesn't show up, but if I move the closing div tags above the div id="galleryDiv" then it the gallery will show up, but it shows up on every page of the application because there is no ending div tag. Also, we were trying to implement buttons that would move the base map images in the gallery from left to right but they only work in google chrome. I wasn't sure why it would only work in Chrome and not any other browser.
I originally had a scrollable view in it but it wouldn't show up at all so I changed it to just mobile.view and it worked. Throughout the application it interchanges view and scrollable views, but from what I've researched, it should all work regardless.
After all the research I've done, I'm pretty sure it has to do with the parent/child relationship with the div tags but I'm not sure why it would keep my gallery from showing up on one page and why when I closed the div tags it shows up. However, if I close the div tag then the gallery shows up on EVERY page.
I appreciate any and all help, ideas, and comments! So... Any ideas?...
So what actually ended up being the problem is that the div tag inherited it's own height at 0px. Once we gave it a height, everything showed up just fine. Now why did it give it's own height 0? No idea. Either way, it works now!