based full screen carousel slide as the landing page of a Rails 4 app.
I am wondering, is it possible to add a fixed box (NOT a header) somewhere on the page (like a regular div class="col-xs-4") and then have it be fixed as the carousel changes in the background?
i.e. this box and its contents should not refresh with every slide, and should not slide off and then back on the screen.
Thanks!
You can put the carousel inside a position: relative container, then place an absolute positioned element inside of that, alongside the carousel.
<div style="position: relative;">
// Carousel code here, positioned as desired.
<div style="position: absolute; top: 0; left: 0;"> // Style as required.
contents of box
</div>
</div>
You could post some code if you need people to provide a more context-specific example.
Related
Using Draw2d and the menu selection code from the demo but I don't get the expected result...
In the demo, the menu appears on the right side of the clicked element. In my version the menu appears way off to the top.
This seems to be caused by the fact that I have some HTML directly above the canvas (header, etc...). On the contrary if the canvas is at the very top of the page it works well.
Found a way to fix this.
It's all about where you append the menu's HTML and relative positionning
In the demo there isn't any HTML above the canvas (on the website it's an iframe so what you see above is not really there from the canvas perspective) so it works.
The demo is misleading because in the code they add the HTML menu in the body tag. They can do that simply because their page is composed of only two elements : the body and the canvas.
In my case and probably yours too, doing this results in adding the HTML menu far far far far away from the canvas itself resulting in a position that is wayoff !
What they do is :
$("body").append(this.overlay);
What you should do is append the HTML menu (this.overlay) as a sibling of the canvas. Do NOT add it in the canvas itself. If you do, you won't catch click events anymore.
Your HTML should look like this :
<div id="some-parent">
<div id="gfx_holder">THE CANVAS</div>
</div>
And the code updated to
$("#some-parent").append(this.overlay);
But it's not finished yet. As the menu is added using position: absolute you'll need your parent containers set to position: relative so the the child's absolute position would become relative to the parent and not web page. It's CSS... You know...
Also, the parent should be the exact same size as the child canvas !
So the HTML should evolve to this :
<div id="some-parent" style="position: relative; height: 800px">
<div id="gfx_holder" style="height: 800px">THE CANVAS</div>
</div>
And when the menu's HTML is added it should look like that at runtime :
<div id="some-parent" style="position: relative; height: 800px">
<div id="gfx_holder" style="height: 800px">THE CANVAS</div>
<div class="overlayMenu" style="top: 230px; left: 197.391px;">⊕</div>
</div>
See ? The overlayMenu has position: absolute which allows it to be rendered at a correct position...
hf
I am currently using the fullpage.js plugin for my website, I created a slide in navigation bar and I am now placing the pancake to open it on the first section of fullpage. I am trying to position it in the top left corner of the page, but I can't figure out how. Here is the code. Thanks in advance for your help.
<div class="section"><span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span><h2 class="animated fadeInDown">GTX 1080</h2></div>
edit: here is all of my code: https://anotepad.com/notes/pjccfy
Image
You give me very little code to go by, but I'm assuming you want a similar navigation as on the fullPage.js demo page.
Using CSS:
.section {
position: fixed;
top: 0;
left: 0;
}
As I said, I have very little to go by so I don't even know if .section is the correct class to apply this positioning to. Would be great if you could provide a complete page. If you want the element to have some spacing between the browser borders, you can increase the values for top and left to say, 20px.
I am editing a Squarespace template and would like to create a sticky navigation sidebar.
There's a Squarespace field where I can enter "Custom CSS."
I already have the sidebar, but how do I modify the CSS to make it stick? I want it to remain visible when I scroll below the fold.
My pageBodyWrapper div is centered (auto/auto) and contains both the contentWrapper div and the sidebar1Wrapper div, on the right.
I have tried
#sidebar1Wrapper
{
position:fixed;
}
with either a left or right value in px or %, but whenever I change window size, the sidebar is either going away from the content or overlaps with it.
How do I prevent this from happening?
Can I define my fixed position relative to the contentWrapper div?
Thank you for your help!
Here's the site I am talking about: Last Wave Film.
Unfortunately that functionality is not yet built into css. It is done with javascript. Essentially the javascript detects when the page has scrolled to the top of and then sets the sidebar to position: fixed.
Here's a solution that uses the jQuery library: http://css-tricks.com/persistent-headers/
You can make the sidebar fixed using css and it will be permanently fixed within the browser window.
.sidebar1Wrapper {
position: fixed;
top: 20px;
right: 40px;
}
so using ExpressionEngine, I can generate a lot of webpages using the same template with different content. My problem is that I can't get the footer to appear where I want it to appear: at the bottom of the background image for each separate webpage.
For example, say that one of my pages is about dogs and the other is about cats. I love dogs so I write two paragraphs about dogs while only writing one paragraph about cats. I would like for both the background image to grow and the footer to be relatively positioned at the bottom of the background image. I have tried messing with both relative and absolute positioning in css, but the minute that I get it right for the "dog" page, it screws up the format for the "cat" page. I have also tried to adjust the height of the background image.
Am I missing something? Maybe there is an easier way to position an object relative to another object in css that I am not aware of? Thanks in advance.
As I previously mentioned, this does NOT achieve the result that I would like:
#landing_details {
position: relative;
bottom: -20px;
left: 40px;
height: 900px;
}
#belowTitle {
position: relative;
bottom: 25px;
}
#landingBodyCopy {
width: 400px;
position: relative;
bottom: -50px;
}
#landing_footer {
position: relative;
left: 120px;
bottom: -105px;
}
These are both nested within a div id="wrapper" which I never reference in my css. The landing details is what changes per entry. Also, the landing_footer div is kept within the landing_details div.
UPDATE:
So the part that I highlighted in red represents the space that I would like to be eliminated from the page.
UPDATE: The basic html layout is as follows
{exp:channel:entries channel="landing_pages" url_title="{segment_2}" sort="asc" disable="categories|pagination"}
<div id="wrapper">
<link rel="stylesheet" type="text/css" media="all" href="{stylesheet='in-store-analytics/LandingBodyStyle'}" />
<div id="landing_details">
<h3 class="LandingHeader"> {landing_page_header} </h3>
<div id="belowTitle">
<h4 class="LandingSubTitle"> {landing_page_sub_title} </h4>
<div id="landingBodyCopy">
<div class="landingBodyCopyText"> {landing_body_copy} </div>
</div>
<div id="landing_footer">
{embed="embed/footer"}
</div> <!-- End of landing footer>
</div> <!--- End of below title-->
</div> <!-- End of the landing details -->
</div> <!-- END div wrapper -->
{/exp:channel:entries}
Thanks again and any help on this matter would be greatly appreciated.
If you do not absolutely position your footer, its default position value will be static, which means that it will naturally appear below ("at the bottom of", like you asked for) any statically or relatively positioned preceding elements, however many there may be, and however big they are.
As for the background image growing according to content length, any div whose height is not explicitly set will expand according to the size of its content. Therefore your two-paragraph content div about dogs will be larger than the one-paragraph page about cats. If there is a background image on the content div, the div will act as a window displaying a portion of the background depending on its size. More content -> bigger content div -> more of the background image displayed. This is possibly not what you mean by having the background image "grow", but it does effectively grow.
If you'd like to perform some kind of dynamic scaling on the bg image, you should be more specific about how you want that to work, since I'd only be guessing at your intent. As well, it would help people answer you if you can provide a barebones version of your rendered pages using jsFiddle or jsbin. Isolate the part of the layout that you want help with and mock it up.
How would I have a DIV stay at the top of the page visually as the user scrolls down a web page?
A simple Javascript framework would be great!
it's for this web site: http://BiblePro.BibleOcean.com
If you don't care about IE6, you can use position: fixed:
div {
top: 0;
position: fixed
}
Using jQuery, see this question: What is the simplest jQuery way to have a ‘position:fixed’ (always at top) div?
That is simple, just make the top Div position and it will work fixed
e.g
Start div tag
<div style="position: fixed;background: #336699; width: 100%;">
Be at the top end div tag