I am building a web page with Zurb Foundation. I need my web page to run on phones and laptops. What's unique about my app is I want to do something more refined than responsive design. For that reason, I'm making heavy use of the show-for-small-only and show-for-medium-up classes.
In my phone view, I'm making use of Offcanvas navigation. As the HTML is setup, it works great if you include the content of your page in the off-canvas-wrap div. However, in my scenario, I cannot do that. Instead, I want to have the content of my page outside of the off-canvas-wrap div. This creates two problems:
The menu doesn't grow to the size of the window.
If I make the right-off-canvas-menu the height of the window, it pushes my content down.
I've created a JSFiddle here that demonstrates the problem. Is there a way I can make the offcanvas menu just slide over the top of everything? I do not need to push everything to the left. Pushing is fine. My main issue is I need to have the content where it is, but still have the menu appear full-size when needed.
Thank you
Or if you want to actually use the offcanvas menu and simply have it overlap your content, you can add this CSS (Foundation 5)
.off-canvas-wrap.move-right,
.off-canvas-wrap.move-left,
.off-canvas-wrap.move-right .inner-wrap,
.off-canvas-wrap.move-left .inner-wrap {
height:100%;
}
.off-canvas-wrap {
position: absolute;
z-index:100;
}
.main-content-wrapper {
padding-top: 2.8125rem;
}
And wrap your content in
<div class="main-content-wrapper">
[your page content here]
</div>
I updated your fiddle with the changes so you can see it in action. Obviously if you want to only show the offcanvas menu conditionally, you'll want to add a media query wrapper to those rules so they only affect the page when you want them to. Otherwise you're adding padding to the top when you don't need it.
If you don't want your content to move when you click the navigation button, then you should not use off navigation canvas (that's what its supposed to do). Instead just use the Foundation 5 Button and set the CSS to be height = 100%
http://foundation.zurb.com/docs/components/dropdown.html
Related
I have a site with a menu bar. This is its CSS:
navigation {
position: relative;
z-index: 200;
}
In one of the pages, I have a button which triggers an iframe and that button is wrapped with div. The iframe is external and my div is coming over that iframe. I want it to be go behind, but can't seem to find a way.
I also want to make sure that any change will not impact other browsers and screen layouts (like mobile).
Change the z-index of the button to be less than that of the iFrame
Mess around with z-index on here:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex
I added the fieldset into a panel row, and now I want to keep this panel visible when I scroll in my dashboard like this example
But like in the example, I want to keep the sidebar on the top when the wrapper text disappears.
i'm sure i need javascript instance to perform this
now i just use css code : position:fixed
You have to convert your XML dashboard to HTML and modify the CSS of the panel you want to have absolute positioning.
Not sure if the title made sense, but I noticed in the wordpress 3.8.1 admin panel, If you resize your window to where the sidebar has menu items blocked from view, it is normal positioning, which allows the sidebar to scroll.
If all the items are visible, then the sidebar has fixed positioning so that only the content to the right of the sidebar will scroll.
Neat little effect.
I was thinking it requires jQuery to add a class or change css. Maybe if the last item in the sidebar is visible then add the class, else leave it alone.
Not sure how to actually code that though.
Can someone help out, maybe even a basic fiddle?
You can do this with simple CSS.
.div_name {
position:fixed;
}
check W3schools Position fixed property for tags
I am using the Serif WebPlus 6 to make a website, but I cannot seem to find a way to make the navigation bar to move when scrolled up and down; I am using an image on top Hotspot as a mean of navigation due to their limited navigation style options.
What I would like, is, that image to move up and down?
Thanks guys!
Saif
Im guessing you mean having the navigation scroll down with the page making it appear fixed to a position?
Do you have access to edit the HTML and CSS of your website?
if so it is actually very easy to create a floating menu bar. The operative CSS code is
position:fixed;
for example:
#nav{
Position:fixed;
}
Create an ID and put that in with any other styling you want to use.
Assign that to a <div> tag in your HTML
for example:
<div id="nav">
link1
link2
link3
</div>
if you dont have access to the code and Serif doesnt offer this as a feature then I'd say you cant do it.
and indent your code unlike my examples :/
To create a floating navbar on WebPlus X6, you can add a panel (Insert->Panel) and choose the option to 'Align panel to browser window' to make that panel fixed (that is, it will not move when the browser window is scrolled). Then, you can place your navbar within the panel so it too does not move on scroll.
How does this slider reload new content as the page is resized?
http://www.herschelsupply.com/
I stumbled across this whilst shopping and their slider is a good facsimile of what I want to create for my own site. Their slider loads new content at a certain point when the window is resized. I have had troubles doing that using BxSlider because I am new to JS.
More info
The problems I have had are these:
I can use css media query or jQuery to hide certain slides, but they remain in the DOM so the slider still displays them in the pager and sometimes it just stops rotating/breaks.
If I create two different sliders to be loaded at different widths the change does not occur as the page is resized. Also this seems wasteful.
If I remove and replace elements from the DOM on $(window).resize(), I am not sure how to return them to the DOM if the window is resized back and forth continuously.
Overall I am just asking what approach you would take to do this? Im sorry if this is verging more towards discussion than a specific question, but I'm not sure where else to ask.
The website you showed simply has two completely separate slideshows. One is hidden and another is shown when the window resizes.
<div id="slider-one" class="hide-for-mobile">
/*Slider here*/
</div>
<div id="slider-two" class="show-for-mobile">
/*Slider here*/
</div>
Then in your media query for mobile...
.hide-for-mobile {
display: none;
}
.show-for-mobile {
display: block;
}
Now, as for a solution that's more along the lines of what you were trying to do... What you need to do is get away from HTML <img> tags. Instead, your sliding elements should be <div>'s with a CSS background image. In this way, in your media queries you can change the background image of the <div>'s. I am unsure whether or not the slider you are using can support this, some are dependent on sliding an actual HTML <img> tag. Some can slide whatever you want. You should be able to manage what I've described with Flexslider (a quick google search will get you where you need to be).