I'm working with a "one-page template" from scratch (just for fun and learn).
I started checking the examples from Boostrap. Later, I noticed that my div's does not fill width/height as I wanted, so I decided to try to work this out with simple CCS but failed, then, in another example, I used some code from FullPage.js.
I really like this bootstrap example and my only purpose is to fill every div on screen but keeping the nav at the top.
I have two working examples on jsfiddle to let you know what I'm doing.
1: fullpaje.js: In this, the navbar doesn't work properly when fullscreen but it does when is not fullscreen, yeah weird.. I mean, with a fullscreen doesn't show in what div are you checking, on another hand when isn't fullscreen it works. (maybe in jsfiddle works because is not fs, try to put the code and save it in an HTML file to see what I'm saying)
$(document).ready(function() {
$('#fullpage').fullpage({
/* no options */
});
});
2: just with css: In this, the navbar get lost in the second div and I don't know if it works correctly. It just disappears while scrolling down.
html, body {height: 100%;}
#section1 { width: 100%; height: 100%;}
#section2 { width: 100%; height: 100%;}
#section3 { width: 100%; height: 100%;}
#section4 { width: 100%; height: 100%;}
Do you have any suggestion about this?
Thanks
I put the HTML code in a file and ran it & saw the same issue. The way i fixed it was downloading the jquery.easings / scrolloverflow JavaScript packages and jquery.fullPage Style sheet page, do you have these installed?
Related
How do you make an iframe fullscreen on button click? I've search but the ones provided only show how to make the window full screen, not iframe. Please help, I'm trying to make an embedded iframe become fullscreen on click. Thanks!
You will have to do two things: make the window fullscreen, and then the <iframe> to fill up the whole size.
You can make it go fullscreen with JS such as in this SO answer.
Then, to make it full size, just add a few styles, like below. What this JS script does is add a class with those styles to the <iframe>.
JS
document.getElementsByTagName("iframe")[0].className = "fullScreen";
CSS
body, html {
height: 100%;
margin: 0;
}
.fullScreen {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
See this partially working* example on JSFiddle.
*partially working because JSFiddle doesn't allow the fullscreen method because it deems it unsafe. But it should work for you.
Please see the screenshot below of my one page website i am trying to create.
Issue - Width of body (shown as selected in picture below)
I want to increase the width of whole website so that the two titles ("Hobbies and Interests" and "Contact Me") can be accommodated in the 2nd line along with the 2 titles(Recognition's and Appreciations and Extramural Engagements and Accolades)
please refer below image for how i want it to look.
I got this by making changes using F12.
However, when i try to change the same thing in skel-noscript.css as below, it doesn't work.
/* Container */
body {
width: 1400px;
}
.container {
width: 1400px;
margin-left: auto;
margin-right: auto;
Any help on this is greatly appreciated. Thank you!
It will be usefull if you will also post here your HTML code
Anyway have you already try this:
.container {
width: 1400px;
margin:0 auto;
}
I found this great plugin called onepage-scroll, which meets my needs, except for one thing. Some of my pages (<section> tags) can be larger than one screen. How can I customize it so that it only scrolls when it finished the "regular" scrolling, inside the section ?
I tried to change the css rule :
.onepage-wrapper {
width: 100%;
/*height: 100%;*/
height:200%;
display: block;
position: relative;
padding: 0;
-webkit-transform-style: preserve-3d;
}
but it still scrolls to the next page, with one scroll movement.
I'm trying to make it scroll to the bottom of the section (height > 100%), then scroll to the next page.
Any help will be appreciated. Thanks !
You may want to use fullPage.js instead. There's an option called scrollOverflow which allow you to have scrolling inside section as you can see in this example
While it's a less ideal solution, we ran into the same issue and found that using an iframe works with jquery onepage scroller as a solution for providing this.
I looked through all the documentation but still cannot find an example. What I would like to do is to have a waiting icon appear in my page when it's doing an Ajax call. Can someone tell me how I can do this with twitter bootstrap.
Also if there are any other non-jquery implementations which are better I would also like to know about those.
Thank you.
Just pick an loading icon (gif) from font-awesome for bootstrap,
show before the ajax call
hide once the ajax response is delivered
To position the icon in the middle of the screen, use the following css
.ajaxLoader {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
Also take a look for button loading images
JSFiddle
If you want something dead center, you can use the absolute position technique.
To do it, create a div and give it these attributes:
margin:auto;
position:absolute;
top:0;left:0;bottom:0;right:0;
width:<however wide the image is>;
height:<however big the image is>;
This will put it smack bam in the center no matter when someone resizes the screen, making it work on mobiles as well as desktops (as long as the image isn't huge).
If you want this to work inside another div, make sure that the parent is position:relative;
You can add a bootstrapmodal with your waiting logo,
unbind theclose event,
and close the modal when your ajax call is ended...
Can anyone point me in the direction of a horizontal and vertically responsive gallery slider plugin or Jscript?
I have tried Flexslider1/2, Galleria, various other plugins, but they are all a set width and don't seem to respond to resizing the browser vertically? I have tried changing all the CSS but no luck.
Any help at would be greatly appreciated.
Example (With Flexslider): If you resize the browser horizontally, the images will automatically resize to fit within the browser window. If you resize vertically this will cut off the image vertically.
Aim: When you resize the browser window vertically the image will change width and height to keep ration and fit within the browser window. Same with Horizontal.
Hopefully I have explained this clearly. If you need clarification please ask rather than down voting.
Having a poke around the code in Flexslider I couldn't find anything specifically excluding the possibility of an image resize on vertical window change. The image resize appears to be purely CSS based which then feeds the width/height inforomation into the javascript. It appears you are stuck with a DOM/CSS issue of the browser not resizing an image on a vertical window change and then a little bit of this not being a tested FlexSlider setup.
It'a always been a bit finicky to get all browsers to understand 100% vertical layouts with no vertical scrolling as it's not the normal layout paradigm. Subsequent CSS versions have helped a bit but there's still a big difference between how browsers react and interpret what you mean by 100%.
I took the slider demo and borrowed most of a stack answer to manage the 100% vertical layout and ended up with this with the detail below.
First, change your image CSS properties to scale the height of the layout and set the width auto to keep the correct aspect:
width: auto;
height: 90%;
This works on an image by itself but the FlexSlider javascript adds some extra elements into the page and also defaults some CSS width values in the demo for the horizontal layout.
.flexslider .slides img {width: 100%; display: block;}
becomes
.flexslider .slides { width: 100%; display: block;}
.img {display: block; }
Now you have a slideshow working in Chrome.
Firefox won't apply the images 100% height to the elements containing the like Chrome so I had to step back through all the elements and apply the 100% height rule in CSS
.flexslider .slides {height: 100%; width: 100%; display: block;}
.img {display: block; }
.flex-viewport img{ height: 100%;}
.flex-viewport li { height: 100%;}
.flex-viewport ul { height: 100%;}
.flex-viewport { height: 100%;}
You'll see I did the img there as well. And you end up with the page.
One draw back to this solution is you now have an image that will resize past the horizontal size of the screen. You probably need to build something in to cater for this as you will run into issues if you use the basic carousel which is dependendant on the width to work. Also something funky happens when you mouseOut of the screen adding a horizontal scroll bar but I'll leave that one for you. Also try IE at your own risk.
...and this is why I shy away from front end development =)
Sorry that post ended up being a bit of a running commentary of me poking about.
I also wanted an image slider that was vertically responsive (and horizontally). After not finding anything out-of-the-box that worked they way I wanted I started fiddlin'.
Here's the result.
Here's the key elements (go to the jsFiddle for the full demo). It's not quite perfect but should be enough to get you started.
HTML
<div id="fader">
<img src="http://placehold.it/600x600&text=Slide1" >
<img src="http://placehold.it/600x600&text=Slide2" >
<img src="http://placehold.it/600x600&text=Slide3" >
<img src="http://placehold.it/600x600&text=Slide4" >
</div>
CSS
#fader {
position: relative;
width: auto;
height: 100%;
}
#fader a {
display:block;
width:auto;
height:100%;
}
#media screen and (orientation: portrait) {
img {
width: 100%;
height:auto !important;
}
}
#media screen and (orientation: landscape) {
img {
height: 100%;
min-width:10%;
max-width:100%;
}
}
Special thanks to this jsFiddle for the lightweight jQuery rotator.