I am implementing facebook's comments box and what i want is that the comments which i grab thru GET and render to template should be invisible to human but visible to search engines.
as experiment, i did this: http://jsfiddle.net/4D8hh/
how can i make first hide the second? but the second should stay crawlable.
z-index seems to be wrong choice here, with what else can i do it?is it possible?
Use display:none for anything you want to have on the page, but not have visible to the user. The content will be there... it just won't "show" on the page.
just put
background:white;
and that should be it
but qoura has some other wonderful idea please take a look here it works for them it should work for you . :)
https://plus.google.com/106413090159067280619/posts/KDSVtgHiuie
May I raise my concern here. Google don't appreciate people are trying to get a better search ranking by hiding text. And it probably won't work at all. Seen from a user perspective, why don't you want the comments to be visible?
Anyway, if you really wanna go down this road, start using:
http://schema.org/Comment
And then you can take the elements out of context with position absolute:
position: absolute;
left: -9999em;
Or like Twitter Bootsrap, .sr-only:
.sr-only
{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}
Related
I'm working on a accessibility issue with an element. I need to hide this element so users can't click/tap it but without disabling the event. I don't want to disable it because voiceover will not be able to trigger the event if it's disabled. I'm using below css but there is still a small hitzone that I can't get rid of.
position: absolute;
left: 15px;
top: 36px;
width: 0;
height: 0;
opacity: 0;
What I have tried so far:
visibility:hidden;
z-index: -1;
onmousedown
It doesn't work as I would like :(
EDIT------------
So I tried to play around with the css and added below to simply relocate the select element and minimize the chance users will click/tap on it:
left: 0;
top: -36px;
z-index: 100;
So there is still a hitzone but it's nearly impossibly for someone to click/tap it. Voiceover can live with this and it doesn't change any behavior for users.
If you're using bootstrap, you could try using the class "sr-only".
If not, well, there's no harm in "borrowing" the style from that:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
I borrowed this sample from this answer since I haven't got the bootstrap source to hand but it looks accurate to me.
You can find out more from the Bootstrap accessibility page
Have you tried display:none . Give it a shot. If not, please post your code here, so we can see the actual problem.
Why don't you just make the element transparent. That way users' won't be able to click or tap on it, and you will still get the events.
There's a small challenge that has taken my sleep for a few days. I didn't get success in all my attempts. To be honest, I didn't even get close.
So, basically I need to animate the object (sun) so that it travels continuously along the path of the oval. When the sun is "in the sky" (that is, on the red part of the oval shown below) it should be visible, but it should not be visible when it is "below the horizon" (the light gray part of the oval below).
I've seen many solutions with perfectly round objects, but none with an oval/elliptical object.
I can't use a canvas here and it'll need to be responsive, but I can use CSS3 and some JavaScript plugin.
Here is a link with my "sandbox", if you wanted to use it.
http://codepen.io/caio/pen/pvKoJx
Only to view the dashed, you can create an object with these properties.
.path {
border: 3px dashed black;
border-radius: 100%;
height: 360px;
left: calc(50% - 295px);
position: absolute;
top: 165px;
width: 590px;
}
you should take a look to this Jquery plugin : https://github.com/CSS-Tricks/jQuery-Circulate-Plugin
I think this could do the job !
Edit : the demo don't work on css-tricks.com, you need to download it.
I am an awful web programmer trying to make a website for a school club. I'm using the fullcalendar plugin to display my Google calendar's events.
The trouble is, I'm using a lot of weird little tricks to get my sidebar to work, and I think that some of the css i'm using to get my divs to display in the proper places are preventing my calendar from displaying correctly. Right now, it's crammed at the top of my div (as you can see in the events tab). I just want the calendar to display beneath the header in my #events div.
I think the culprit lies somewhere in one of these css blocks:
.container div
{
opacity: 0;
position: absolute;
top: 0;
left: 0;
padding: 10px 40px;
overflow:hidden;
}
.container
{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
width:80%;
min-height: 100%;
left:20%;
background-color: #ffffff;
position: relative;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
border-radius: 0 3px 3px 3px;
overflow-x:hidden;
overflow-y:scroll;
}
I play around with the "position:absolute" in .container div, but that just makes all of my divs go haywire. I'm really, really new at this. If anyone can help me figure out why this isn't working or give me tips on how to manage my sidebar more intelligently, I would appreciate it.
The site is hosted here:
http://webbox.cs.du.edu/~samkern/DU-GDS/index.php
Also, if any clarifications are needed, please ask. I hope I have given enough information.
I think I might have a sollution for you:
change
.container div {}
to
.container > div {}
What you're saying with .container div {}, is that ALL divs within the .container must have that style. This is apparently not what you want.
With .container > div, you only select the div's within the .container on the 1st level.
I.E.:
<div class="container">
<div> <!-- this div gets the styling from .container > div -->
<div> <!-- this div doesn't get styling from .container > div --> </div>
</div>
</div>
I hope I made this clear for you.
Give a height to your div, either in the HTML initially, or in the JavaScript when that populates the div with something. Since the page starts up with nothing much in the div it doesn't have any height. Later the JavaScript is adding content, but that won't change the height, so scroll bars appear instead and everything is out of sight. So give it enough height to hold all the content (use em units for the height, rather than px units, so it won't matter what text height your users are using).
Also check out your JavaScript syntax - there's an unwanted comma I think in the $(document.ready()) function, for instance, which should stop that bit of code running.
Also correct your HTML (run it through an HTML validator - there's several around). The errors aren't causing your particular problem, but needs cleaning up nevertheless. It needs a DOCTYPE eg for HTML5. The link to normalize.css should be in an href not an src attribute, and the for attributes in your labels don't all point to field names.
on facebook if you hover over something with a lot of likes a div pops up showing everyone who likes the post. i was wondering if anyone could mimic the div in css and explain how i can do it. there is a picture below showing what i mean. i know you have to use a :after in css but im not sure how to position the triangle and all that.
Here is some code i found somewhere else:
#pointed {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background-color: white;
}
#pointed:after,
#pointed::after {
position: absolute;
top: 100%;
left: 50%;
margin-left: -50%;
content: '';
width: 0;
height: 0;
border-top: solid 150px red;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
}
The code you pasted there has the gist of it down. You can see a working JSFiddle here that makes it more like what you're going for.
There are two parts to this problem, I think. The first part is making the triangle. The second part is positioning the triangle.
Making the Triangle
The borders on the pseudoelement are responsible for that triangle we're seeing. If you're not sure how that's happening, take a look at this great answer that explains it quite well, I think.
Positioning the Triangle
The key to positioning involves making the child appear outside of the parent. We can do this by setting absolute positioning on the child. However, if we do this without changing the parent at all, the absolute positioning will be set relative to the window.
What we want here is positioning the child relative to the parent. We can do this by setting the parent element's positioning to anything other than static, which is the default value. In the code you pasted, you can see they set it to relative. For more about positioning, the working docs are pretty explanatory, I think. Another great resource can be found on CSS Tricks.
Anyway, we want our child to be just outside the parent. Accordingly, if we have a 5px high triangle, the child's CSS for positioning should look something like:
position: absolute;
top: -5px;
This will make it appear like its attached to the top, as you can see in the above JSFiddle.
After you've positioned it vertically the way you want it to, set its left positioning to get it where you want along the horizontal.
Though of course you must ask yourself if it's worth reinventing the wheel—tooltips come with Bootstrap Jquery.
I'm tying to achieve zoom effect which you can see here: http://x3dom.org/x3dom/example/x3dom_x3dElementCSSIntegration.html.
So, I have a simple element (it doesn't matter that this is x3d example, really), which I want to enlarge to full screen size with a click of a button, and then reduce back to it's original size after clicking the button again. I would very much appreciate any help I can get with coding this in JavaScript. I have viewed the page source on this example and tried to get it to work in my project, but I'm very bad with JavaScript and I can't seem to get it to work.
Also, I tried searching with Google, but all the examples I found are far fancier in comparison with what I need.
Something similar to the following should work.
HTML:
<div id="zoomable" class="resizable">
content
</div>
CSS:
.resizable {
position: relative;
}
.resizable.zoomed {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
JavaScript:
document.getElementById('zoomable').className = "resizable zoomed";