I want a login page that will slide down from the top of the web page. BUT I want it to move the whole website down rather than covering the page.
Anyone can refer me to a link?
Erik
One way to do it is to use relative positioning in your HTML so that the main content flows after the login. This means all you have to do is resize the height of the login div to push down the rest of the content:
<div id="thePage">
<div id="login"><!-- login stuff here --></div>
<div id="restOfThePage"><!-- The rest of the page here --></div>
</div>
CSS would be something like this:
#login { height: 0; }
Then when you wanted to show the login panel through JavaScript, you'd just do this:
document.getElementById("login").style.height = "100px"; // for example
Or if you wanted to animate the login panel, you could use jQuery or any number of JavaScript libraries with animation capabilities.
If you are using jQuery then .slideDown() method is what you want.
Related
I have a WordPress site where I added banner and sidebar filter option. But the banner shows as a conflict with filter option. If I added margin-top:300px then it goes down but this change applies to every page. I want to change this for the specific page only because I don't have banner on every page.
My site: http://motor.racedrivenonly.com/shop
Header image below:
There are classes added to the body tag in WordPress. Try to determine the proper body class ad you'll be able to add the margin based on a particular page template or type of page.
Try something like this:
.post-type-archive-product .blog-sb-widgets {
margin-top: 300px;
}
I am working/designing the front-end (working on the layout html+css, later will use php, mvc pattern) of a website. The website has a header, body, side menu and a footer The layout is ready.
There are a few forms which are unusually long/huge since all fields are necessary and I could not make them any shorter. The form opens in a new page.
Not to scare the user away I am planning to downsize the header on the form template (the design change will only apply to the form templates) and get rid of the footer completely.
I tried looking a few places but did not find how to go it done. In short, I want the site to have all block i.e. header, body, footer but when it comes to the form I would want to downsize the header and remove the footer to make the form look sleeker.
Is there a way to do this?
Note: I post no code because I have no problem with the code but the concept.
You can use display: none for the footerelement in CSS rules that only apply to this page (for example in a style tag in the head of that page).
Concerning the header, it depends how it is built, if it has a logo, background image, text, menu, whatever. In general you could reduce the height, make the logo smaller, hide parts of the text in there etc.
You can also done this thing using angularjs
ng-include
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body >
<div ng-include="'header.html'">
</div>
<div ng-include="'footer.html'">
</div>
</body>
</html>
Make sure the body of the page has a class, for example .no-footer .small-header or .form-page. and then in your CSS stylesheet, use something like this :
body.no-footer #footer{
display:none;
}
body.small-header #header{
height:50px;
/* or whatever you want to apply to make the header smaller */
}
I make a side bar in the left side of a page by using of panel and and on the top of page I have a navigation. now when I run the program panel header shows below the navigation.
I have made a stylesheet
top-margin-page{
padding-top:8cm;
}
I put the panel in a column of a row and row is inside a container. I use my style sheet as a class attribute for row and I did not get the result then I put it for container and did not get the result. also I added my stlesheet at top of page as
#Styles.Render("~/Content/myStyles")
in top of page
body {
margin-top: 8cm !important;
}
just a quick check, your css should be:
.top-margin-page{
padding-top:8cm;
}
note the .
then you can use it like:
<div class="top-margin-page">...</div>
I am working on a mobile application using HTML5, CSS3, JqueryMobile, which requires a screen to be blocked from all events as soon as submit button is clicked.
I have 2 div in the body as follows:
<div data-role=page id=p1>
content of the page goes here
</div>
<div id=inputBlocker> </div>
This input blocker is added on fly to the body when submit button is clicked on page p1.
The CSS for inputBlocker is as follows:
#inputBlocker {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:99999999;
}
This solution helps me with blocking any input events when submit button is clicked.
But the problem is that if page p1 has more content that does not fit into the screen, it scrolls. Now, when the user taps on submit button, page p1 is disabled by the input blocker, but still the user is able to scroll page p1. Is there a possiblity to stop this scroll effect?
I see you have a creative solution, to put something in front and therefore block all inputs...
Consider this more built in solution:
pointer-events="none"
as an attribute to an HTML div, or to the html or body tag itself. You can use javascript to enable it. I am pretty sure you can use it as a CSS property too.
I need to create a popup like the map has here on this page, but I'm not sure how best to do it and wondered if anyone could point me to some code would match that effect?
Any ideas would be great.
The Twitter Bootstrap modal jQuery plugin is really nice. You can get the html and javascript for it by customizing bootstrap here: http://twitter.github.io/bootstrap/customize.html
select only Modals from the components section and modals from the jQuery plugins section, and nothing else. Then download.
How to use it can be found here:
http://twitter.github.io/bootstrap/javascript.html#modals
basically what you do is in your markup, make a div that will be the popup, and give it the classes "modal hide fade". And then make something that will be the button to toggle the modal, and give it the attributes data-target="(the css selector of the modal div)" and data-toggle="modal".
To create a basic dialog/modal, you just need to create a new div or show an existing div with position: fixed and z-index: 1000 (or some other high value) using JavaScript. That div can have whatever contents you like. Along with the dialog/modal div, you would probably want a backdrop div as well, probably with at least the following styling:
position: fixed;
height: 100%;
width: 100%;
z-index: 500; // or some other high value
If you don't want to create your own, you could take a look at jQuery UI dialogs or bootstrap modals.