I'm trying to implement a Custom Enter VR Button as described here: https://aframe.io/docs/0.9.0/components/vr-mode-ui.html
I can't get it to work. The button fails to show up at all. Here's a jsfiddle showing the issue: https://jsfiddle.net/r0wtq3xb/
Am I missing something? The doc page says to "Style the button with images or whatever." I've tried the following, and nothing works (the button doesn't show up at all):
<a id="myEnterVRButton" href="#">
<div style="height: 100px;width:100px;background-color:red;"></div>
</a>
<a id="myEnterVRButton" href="#">
<img src="sprite.png" style="width:42px;height:42px;border:0;background-color:red;">
</a>
Any help is appreciated! Thanks.
Try z-index: 999999 and position: fixed.
Related
I have a gallery page that looks pretty good, but I need to add my own pictures of myself and/or family... I've tried to do so but it isn't working the way it should.
Here a codepen of the problem: https://codepen.io/AJ2021/pen/EOWYvmenter code here
I need my photos to be in a shadowbox so I have a thumbnail on the page and when I click on it, it opens in a large view.
If the codepen has the exact same code your dreamweaver does, I found an error in the snippet.
It originally was:
" alt=""/> rel="shadowbox[picture]" title="a">
<img src="../Documents/SU Fall 2017/Foltz class/tmb_Lawtons_Marina.jpg">
</a>
Now it's:
<a href="../Documents/SU Fall 2017/Foltz_class/img_Lawtons_Marina.jpg" alt="" rel="shadowbox[picture]" title="a">
<img src="../Documents/SU Fall 2017/Foltz class/tmb_Lawtons_Marina.jpg">
</a>
It looks like the anchor tag <a> had closed too early.
I am having issue on my wordpress website. Where I have gallery plugin and the images in that gallery showing this error message when you click on the image. In past those used to pop up when you click on it. But currently it show this error message. I think there is some js conflict please help me here. screenshot- here
webpage - http://www.marvelrealtors.com/residential-properties/izara/
image url is missing in anchor tag. please check.
<a href="#" class="poppup">
<img src="http://www.marvelrealtors.com/wp-content/uploads/2015/05/Izara-Dining-Room.jpg" title="Dining" alt="Dining" data-lazy-loaded="true" style="display: inline;"><noscript><img title="Dining" src="http://www.marvelrealtors.com/wp-content/uploads/2015/05/Izara-Dining-Room.jpg" alt="Dining"/></noscript>
</a>
Working script:
<a class="image-popup-no-margins boxed_shadow" href="http://www.marvelrealtors.com/wp-content/uploads/2015/06/Izara-site-plan.jpg" target="_self">
<img src="http://www.marvelrealtors.com/wp-content/uploads/2015/06/Izara-site-plan.jpg" class=" vc_box_border_grey attachment-full" alt="layout" data-lazy-loaded="true" style="display: inline;"><noscript><img src="http://www.marvelrealtors.com/wp-content/uploads/2015/06/Izara-site-plan.jpg" class=" vc_box_border_grey attachment-full" alt="layout" /></noscript>
</a>
The problem comes from file names, no accent, space or special character and it will work.
Hoping someone here can help me, I installed a wordpress theme on a site ( http://nationalaviationinstitute.ie/ ) and I have an issue I can't resolve and the developer of the theme is refusing to acknowlege the issue!
If you visit the above site in Chrome, the bottom section of the site jumps up and covers the four service areas underneath the image slider. This only happens in Chrome, it's ok in all other browsers, it's obviously something to with the responsiveness of the site as if you resize the bottom section moves back to the correct position.
I'm fairly familiar with CSS and HTML so if anyone could give me a hand figuring out the cause of this and a possible solution I'd greatly appreciate it.
Thanks,
Anthony
There is a javascript bug which is giving the divs inside each <li> tag style="height: 0px;" on resize event like the example below:
<li class="span3 thumbnail">
<div class="block-thumbnail maxheight col" style="height: 0px;">
<i class="icon-3x icon-cogs"><i class="circle-border"></i></i>
<h3>Our Courses</h3>
<p>At NAI we have a number of different courses to suit everybody’s needs, academic to professional. <a class="link" href="http://nationalaviationinstitute.ie/courses/">read more →</a></p>
</div>
</li>
if you find and fix the js that is causing this problem than the problem will be fixed.
But incase you need a faster fix you can add the following css:
.block-thumbnail{
display: inline-block;
}
It will override the style="height: 0px;" added by the js and the bottom section will be pushed down
When I hover over a button and the tooltip appears, the buttons jump. If I disable the tooltip, it does not jump. Additionally, the right button loses the rounded edges. How can I prevent this from happening?
<div class="btn-group">
<a rel="tooltip" class="btn" href="#" data-title="View Details"><i class="icon-list-alt"></i></a>
<a rel="tooltip" class="btn" href="#" data-title="Delete"><i class="icon-trash"> </i></a>
</div>
Javascript:
$('[rel=tooltip]').tooltip();
Working version...
http://jsfiddle.net/BA4zM/147/
Here is a website that has it working without the jumping...
http://wrapbootstrap.com/preview/WB005S479
To avoid the jump, you need to set the container attribute. This is documented.
When using tooltips and popovers with the Bootstrap input groups,
you'll have to set the container option to avoid
unwanted side effects.
Try the following:
$('[rel=tooltip]').tooltip({container: 'body'});
As Howie said at https://stackoverflow.com/a/14770263/7598367, it's necesary to add the 'container' to tooltip.
That didn't solve my issue (I had the same problem), it's also necesary to declare at JS file BEFORE the .tooltip() initilization, this way:
$('[data-toggle=tooltip]').tooltip({container: 'body'});
$('[data-toggle="tooltip"]').tooltip();
Hope this helps if somebody has the same problem in the future.
I have a portfolio that works fine but I'm currently building a CMS for it so that I can simply upload the image and it adds it to the site for me. Before I build it, I'm rebuilding some of the scrappy code and converting the what was a JS powered gallery to a CSS powered one.
I'm trying to achieve this click effect in CSS. http://www.tomdwyerdesign.com/graphics/
I thought I could do it via the :focus selector but I've run into a little problem.
This is the HTML:
<a class="tile" href="#">
<img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>
and this is the CSS:
.tile:focus img{
background-image: url("images/large/DLPWD.png");
width: 771px;
height: 600px;
}
It doesn't seem to select it properly. Any one know why?
Thanks.
The problem is that a link is not necessarily focused when it's clicked, it's focused when you navigate to it. You can do this with the keyboard, or you could add a click handler to the link. Of course at that point, you're back into javascript, but it shows what's happening.
E.g.
<a class="tile" href="#" onclick="this.focus()">
<img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>
Luckily, there is a better solution, and one that doesn't require javascript. If you add a tabindex to the link, clicking it will focus it even if the href is going nowhere. So...
<a class="tile" href="#" tabindex="0">
<img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>
Should do what you want.
(your next problem is going to be that the background-image won't be visible in front of the src image - you're just going to get a stretched version of the thumbnail. But I think that's a different question)
:focus is only available on elements that receive keyboard input (i.e. form elements). You could try :active but it will only apply the CSS while the mouse button is down.