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";
Related
I am trying hard to show a div in the last pages footer section.
But this not working for me. I have tried so many solutions given in
StackOverflow. But none of them are working for me.
Problem link is given below.
Link: https://jsfiddle.net/minhajhasan/qzd8w14b/
I have tried with these codes to take my div in the footer.
<Style>
.print-address{
position: absolute;
bottom: 0px;
left: 0px;
height: 50px;
}
</style>
HTML 5 and CSS3 have no support for printing page header and footers in print media.
And while you might be able to simulate it with:
tables fixed
position blocks
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.
I am trying to implement a drop-down menu containing notifications, like this page has: http://infinite-woodland-5276.herokuapp.com/index.html. The bullhorn icon in the top right part of the site, and it's menu, is what I am trying to recreate.
I have succesfully made a header menu icon, with a list of items. However I can't make the scrollbar work.
It's using the jquery plugin slimScroll, found here: http://rocha.la/jQuery-slimScroll.
The attatchment of the scrollbar seems extremely simple and straight forward, in the tutorials. Here is what I do:
$(document).ready(function(){
$('#main-navbar-notifications').slimScroll({
height : 250
});
});
After implementing this code, This code appears in my DOM:
<div class="slimScrollBar" style="width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 195.925px; background: rgb(0, 0, 0);"></div>
<div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div>
These appear not inside the #main-navbar-notifications, as I would have expected, but subsequently. However, I found that the exact same DOM structure is present in the example I am trying to copy. Seems like it is as it should.
But my scrollbar simply does not work. If I hover the mouse over the div, nothing happens. I tried setting the scrollbar to always be visible, and still nothing happened. Then I went into the HTML itself, in chrome inspector, and manually set the scrollbar and rail to be visible. That worked for visibility, as they visually appeared exactly as I would have expected them to, but they still didn't react to any mouse actions.
The only info I have been able to find on the subject, is to make sure that my scrolling div is set to position: relative;, but that didn't do anything. There are no error messages, or any messages at all in my console either.
I've tried to recreate my problem in a fiddle, but I was unable to upload the slimscroll-library there.
Does anyone know what this error could be about? Or any strategies for figuring out what the problem actually is?
Turns out, I had manually copied a <div class="slimScrollDiv">, a wrapping div which is supposed to be generated from the plugin, for the scrolling pane. Once I removed that div, slimScroll worked perfectly...
Whenever i re-size my window the slider buttons (next/previous) disappear and do not move with the slider. Any idea on how to fix this?
JSFIDDLE:https://jsfiddle.net/b31kvqwr/
Buttons CSS:
#nav img {
position: absolute;
top: -10px;
cursor:pointer;
color:grey;
width:40px;
height:30px;
}
#prev {
margin-left: 530px;
font-size: 10px;
}
#next {
right: -30px;
margin-top: 13px;
}
PS: if the result in the jsfiddle doesn't show, expand the result tab.
This is how the slider looks like when full screen (the right way);
This what happens when i re-size the browser horizontally:
The buttons aren't moving with the slider. Any help please?
The problem at the moment is that you are using margin-left:530px; meaning that the arrows will always be 530px from the left of the screen no matter the size of the screen. It also looks like what ever is wrapping it has a set width and isn't resizing, your code was to messy for me to find this but there are a few thing that I found to make the problem a little better,
https://jsfiddle.net/b31kvqwr/2/
I have managed to keep it the correct place for a lot of the, however to improve get it working perfectly you will need to create 1-2 #mediaqueries to tweet the alignments at different sizes to make it perfect.
The way I did this was by changing margin-left to position:absolute and use a left positioning instead on your prev and next buttons;
#prev {
left: 50%;
font-size: 10px;
position:absolute;
}
#next {
margin-top: 13px;
left:58%;
position:absolute;
}
As I side note I would recommend cleaning up your code like #TingGaint said as it is insanely messy. Also when posting on stack try only include the relevant code not all of it as it makes it quicker and easier to look through and help.
EDIT
I have found the problem, still do what I said above however now instead of have the arrows div where they are now, move them out and so there below <div id="wrapper"> however you will have to play around with the placement as they will be at the top of the screen. However now they stay in the same place when re-sizing!
Example - https://jsfiddle.net/b31kvqwr/4/
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;
}