I am working on a single page website. Framework used by me is Bootstrap. My question is regarding navigation bar. I want my navigation-bar to be transparent on first-page and as I scroll down it should become visible and be fixed as I continue to scroll down.
I am able to make it transparent on first-page but I am unable to make it appear on second page. It remains transparent.
Pls help me. I am a newbie.
Thanks in advance
You can make two navbars one will be transparent and one will be the fixed one and then use JavaScript onScroll and display CSS property for removing and adding your navigations.
Sounds like you have to use JavaScript. If I understand right and you want the navbar on top transparent and if you begin to scroll no more transparent and then fixed to top?
Related
A client of mine saw this awesome scrolling effect when clicking on a menu item: http://www.feedmusic.com/
I'm talking about the grey/purple overflow between the two anchor menu items.
I've been Googeling around for hours and can't find anything like this. Does anyone know how to achieve this?
Thanks in advance!
It's singlepage application with disabled scrolling. I haven't experience with singlepage, but here are ideas which looks like it could work:
Create two divs between content one gray and second purple (or one with two colors in the background). Then create scrolling via js (jquery) on button click.
If it's ajax loaded, there could be only 3 divs: one with current content, one with gray/purple background and third with new content and js should place the divs to required places. But first solution should be easier.
Implementation is up to you.
I'm working on adding bxslider to my Rails web project. I have it added sucessfully. However, what is annoying is that even after altering several CSS feautures, there is gray area at the bottom that does not go away. I've tried setting various heights to 100%, but does not work. I also tried eliminating any borders or padding, which still doesn't do the trick. Has anyone experienced the same issue or knows how to eradicate the gray body part so that images fit the entire height of the slider?
Thanks for the comments! I realized that in order to get rid of the grey area, I needed to adjust the height of the iframe itself, and not tamper too much with the CSS related to the images within the slider or any of its contents.
Click this link to see my concept image regarding the subject: http://i45.tinypic.com/k33c0i.jpg
Hi! Is it possible to do such custom "sliders" for overflowing content without the default Scrollers? It doesn't matter how the actual transition goes (could work just like the regular horizontal scrollbar for i care, just without the ugly default gray buttons/bar). Preferably i would like to do it just with CSS, but if not, i'll consider other ways to do it aswell. Or i'll just simply create another page to the remaining images.
http://www.visioville.fi/en/
Thanks!
You can get rid of the scrollbars by setting
overflow:hidden
in CSS, which will "clip" the DIV contents.
I don't think there is a pure CSS way to scroll it. That is easily doable with jQuery.ScrollTo - just bind hover() or click() events to your arrow icons.
Take a look at this site, I believe it will be of some use to you. It's what I've used in the past: http://jscrollpane.kelvinluck.com/
I would like to put a reflection over the entire page. I have a transparent png that fades from white to transparent and I would like it to fill the browser and be displayed above everything else but allow the user to click on everything behind it, not be able to be dragged, and work in all browsers. Is this possible?
You can use pointer-events: none, which works everywhere except IE10 and older.
A blog post with more information:
http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
Why not make the content backgrounds transparent, or with transparent png's?
Or set the opacity for the content as if it's faded into the background. Not sure what you're trying to achieve though I'm sure you can get a similar effect if you try a new approach. From a design point of view I can't imagine how a div over the main content could create an effect not achievable via other methods.
I am working on a div which should show a drop shadow at the bottom and right. Here is the link to the html page. I dont know why the classes are not getting applied to the div. Your help is highly appreciated.
Tooltip.html
Here is the image mock-up which shows the Drop shadow affect
Image-mockup
This might help...
You can also drew shadows using css3 in the browser that supported it. Like:
-moz-box-shadow