I have seen sites with a fixed position box at the corner of every page containing a google +1 button and they encourage users to recommend the website as a whole by clicking the button.
This way every +1 button on every page will recommend the homepage! and not the page user is viewing.
Is this possible? and if Possible is leagal(based on google policy)? and if leagal, doese this practice improves the SEO of the site?
You'll need a CSS like this (adjust the width/height, top,left as you see fit):
#googleplus {
height: 50px;
width: 50px;
position: fixed;
left: 10px;
top: 10px;
z-index: 1000;
}
and use it like this (on every page):
<div id="googleplus"><!-- google +1 code here --></div>
Now, this div will be on top of everything on your page and should remain there, as you scroll up/down.
As for the legality, you should check Google +1 policy
As for the merits regarding doing this to improve your SEO - it depends on your user base no? If they see the button on every page and they like your site, they are more more likely to click it and share it. (because the button is there, always).
Related
I have a problem with scaling leaflet map to fit mobile devices. I'm building an application using React, Leaflet(+React-Leaflet) & OpenStreetMaps.
If I'm placing component like footer or zoom control on the bottom of the screen, they appear either half or not at all, as they are hidden behind mobile devices menu.
Here's an example.
Web version
Mobile version
In this case, the zoom control component does not appear at all in the mobile version. If I change maps height property to 90vh for example, it appears again.
Mobile version with 90vh
Of course now it works, but looks ugly and isn't responsive. How can I fix this?
I have followed this example, but it doesn't seem to help.
I fixed this. In case this same problem occurs to someone else in the future, here is my solution.
When you are adding css properties to your Map component, rather than using "height: 100vh;", use "height: 100%;" like shown in this example. You should use a wrapper container set to position fixed, or absolute to get height 100% working correctly. Here is and example:
Rendering Map component
<div className="map-wrapper">
<Map/>
</div>
CSS
.map-wrapper {
width: 100%;
height: 100%;
position: fixed;
}
.map {
width: 100%;
height: 100%;
position: relative;
}
I have read Antd's layout design documents and the docs on Grid and Layout. What I don't understand is how to accomplish the following design in Antd:
I'd like my app to have a single centered column.
On a wide screen (landscape clients), the center column should be fairly narrow. In terms of grid, maybe 8 units.
On a narrow screen (portrait clients), the center column should use a relatively large
width. In terms of grid up to 24 units in case of very narrow/small screen sizes.
Basically this sounds like I'm looking for the good old container with a max width. I could obviously come up with some custom CSS to style a custom <div>, but this makes me wonder:
Am I missing something, or is there really no way to achieve that with Antd's layout system natively?
If so, am I doing something wrong in terms of modern UI design philosophy?
We have done this. Not exactly via Ant Design, but used a lot of Ant Design inside this.
I am not sure what other solutions are, but this is how we did it. The container you talked about was the parent container of our website, with everything else rendered inside this.
We created a routing inside the main container (as bottom tabs, so was convenient for us) and set its max-width to 420px. Since everything was contained in the bottom tabs, our app was centered when on landscape clients, and looked to fill the width on portrait mode.
Code for clarity. (its a react app)
App Container CSS:
.App {
text-align: center;
height: 100vh !important;
}
Parent Container CSS:
.parentcontainer {
height: calc(100vh - 50px);
max-width: '100%';
display: inline-block;
width: 100vw;
}
Tab CSS:
position: 'fixed',
padding-bottom: '10px',
bottom: '0',
width: '100%',
max-width: '420px',
This worked for us, and the behavior is what you desire.
I developing a mobile website with angular-material which uses a floating button on the homepage as seen in many Google Applications. The button is always present and fixed in the right lower corner. It all works well. However, when I scroll the page and the browser address bar hides, the body height changes as well. The result is that the button moves up, too. See the images for better understanding.
This is the CSS of the button:
.floating-button{
position: fixed;
margin-top: 120%;
margin-left: 80%;
}
When i use top instead of margin-top, the button moves up and once the address bar is hidden, it jumpes back down.
Is there any possibility that the button will stay fixed? I would prefer not forcing the address bar to hide or stay fixed. Thanks in advance!
.floating-button{
position: absolute;
margin-top: 120%;
margin-left: 80%;
}
Try using the position absolute rule instead. Position absolute keeps an element on the page where you specify it independent of other elements.
I know this is an old question, but I came here with a similar problem and a combination of your question and what I already had solved my problem.
What I had is that the FAB would get hidden (move down) when the address bar is triggered and Kiko's answer didn't change that, so I assume it would bring my problem to your code.
For it to stop moving, I had to change my position: absolute to fixed like yours. The rest of the CSS is below:
.floating-button {
position: fixed;
right: 20px;
bottom: 20px;
}
I hope this helps future people passing by.
I have read the below article/tutorial
http://tympanus.net/codrops/2013/12/18/perspective-page-view-navigation/
I am trying to make this work from angularjs, below is the fiddler
http://fiddle.jshell.net/cZs5y/
Its working with following two issues.
Mouse click hand icon visible allover the page. ( I want it to be visible only on the button).
On Mobile devices, I am seeing little delay and flickering effect.
I am new to Angular, any ideas how to improve this.
Update: Issue 1 solved fiddler link.
Update 2: After adding "ngTouch" module there is no delay on mobile but flickering effect is still there.
Make .perspective.modalview and container cursor property to auto to remove unnecessary pointer from the screen. also add style="cursor:pointer" to button.
css:
.perspective.modalview {
cursor: auto;
}
.container{
cursor: auto;
}
http://cardiffhosp.rapdevs.co.uk/ has been built around the WooTheme Canvas, which is a responsive design.
I've had to disable the viewport meta tag, because I don't want the layout to be responsive.
It now looks much better on mobile devices, but a white area is appearing to the right hand side. Mostly visible on iPhone/iPad, but zooming out on other devices shows the white space is there.
Adding the following code, solved my problem, but caused the navigation to stop working on iPhones and caused display issues on a Windows 7 phone...
html, body {
overflow-x:hidden;
}
Has anyone got a better solution for removing the white space?
You can try adding width:100% and see if that solves the issue the overflow is causing, IE:
html, body {
overflow-x:hidden;
width:100%;
/* You may also want to try adding:*/
margin: 0;
padding: 0;
}
If that still causes problems then you will need to find the element that is causing the issue.
Couple ways to do this. (Be sure to remove overflow-x:hidden; before starting.)
1) Open the inspector, start with the divs or elements that contains other elements. Set those divs to display:none. If the excess white space disappears then you can find the offending element and fix its CSS.
If that option is too time consuming or you have trouble doing it, you can try another option:
2) This site has some CSS which outlines all of the elements on your site. This can help you find what is causing the overflow. The CSS used on this site is:
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
They also provide a javascript bookmark that helps with this as well.