I have just encountered the strangest problem I've ever come across in my humble web developing freelance career. I'm building a web application for a job application site where applicants use their webcams to answer 3 short questions. For this I use a jQuery plugin called ScriptCam which uses Flash to activate the user's webcam. I had this all working just fine but now I have the following problem.
I use jQuery .show() and .hide() to show and hide buttons. One button, a replay button, doesn't show up when calling $("#replay").show(); but DOES show when I right click anywhere in the browser after calling this command and hit "Inspect Element"! I've been searching for what could cause this problem but haven't found anything... What could cause this behavior?
This is how I have defined the button:
<div onclick='replay();' id='replay' class="replay">Replay</div>
This is the button's CSS:
.replay{
float: left;
top: 150px;
left: 60px;
z-index: 100;
-webkit-box-shadow: 0 12px 36px -16px rgba(0,0,0,0.5);
background:url('../img/button-grey.png') no-repeat 100% 100%;
background-position: center center;
color: white;
width: 140px;
text-align: center;
padding: 10px;
cursor: pointer;
font-family: Archive;
display: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
Edit: This is CSS of the button's parent div:
.box{
margin-left: 100px;
height: 337px;
width: 300px;
float: left;
text-align: center;
}
I haven't used any delays anywhere and the button really appears only right after I click inspect element somewhere in the browser. I also cannot reproduce this problem anywhere else. Anyone got an idea what could cause this? Any help would be much appreciated, thanks in advance!
Update: It appears that only Safari on Mac is having issues.
Update 2: When moving the button out of it's parent div to directly below the body tag it works as it should! So it's probably a css conflict of the parent div?
Edit: You can see the problem live here, just hit the button "Volgende vraag" en wait for the small video to finish. After that the replay button should appear right above the video.
I've found the solution! The problem is caused by an earlier container div which has the CSS display:none. Although I change that with jQuery's .show() before the problem occurs and it's contents are visible, removing display:none in my CSS makes it work! Thanks for all the great help and suggestions!
For me I had to change the visibility of an element that I found hidden above the image in my stylesheet to fix the issue. I found it by using inspect-element.
Then after changing it the image moved up obviously so I had to change the margins to change it back to its original position.
Related
I want to implement a functionality in my React app where you hover over a <span> element and then an InfoBox appears over the <span> element.
It should look like in Visual Studio code when you hover your cursor over a variable for example.
The box should behave as in the following sketch I drew (basically it's the same behavior as in VSCode): The InfoBox is the box that contains This text. The <span> contains the hello
Unfortunately I'm not an expert in CSS and I don't even know if this is possible with CSS only or if you have to use javascript as well.
I was looking into similar things so figured I might share what I ended up with.
If you go to Help > Toggle Developer Tools it opens up the Dev Tools just like in Chrome on the side. Seems like most Electron based apps have this (although Ctrl+Shift+I—I'm on Windows—didn't work for me on VS Code somehow. Needed to open it via mouse through the aforementioned method).
With the Dev Tools you can then view what HTML, JavaScript, and CSS is used to make the displayed UI possible. I opened up the console tab at the bottom so that I can type on it while I use my mouse to hover on things, then I entered debugger command in the console to pause the JS execution or something (don't quote me on this). Point is it pauses the state of everything so you can then keep the tooltip that is created with JavaScript in display.
Seems like it's just standard Tooltip positioning with display: block and position: fixed, as well as max-width, top and left set by calculated JavaScript. There's also a z-index rule set by a class selector but that's on the stylesheet.
element.style {
position: fixed;
display: block;
visibility: inherit;
max-width: 1152px;
top: 85px;
left: 147px;
}
Personally I would use position: absolute instead of fixed. I would guess they used fixed in Visual Studio Code instead because of the way they calculated the position inside each "split view" (the windows), because the overridden CSS stylesheet did use position: absolute as seen here.
.monaco-hover {
cursor: default;
position: absolute;
overflow: hidden;
z-index: 50;
user-select: text;
-webkit-user-select: text;
-ms-user-select: text;
box-sizing: initial;
animation: fadein .1s linear;
line-height: 1.5em;
}
I recognize this doesn't fully answer the question (nothing on how to get or set the dimensions) but I know where I need to go myself from here on, and for those answers I think you can go looking for answers elsewhere depending on if you're writing vanilla JS, or using some framework (in which case there might be an easier way to get, calculate, and set those things).
Is this what you are looking for?
Where you hover over some text and text below it appears?
.thisText > .hello {
display: none;
}
.thisText:hover > .hello {
display: block;
}
<span class="thisText">
This Text
<span class="hello">
Hello
</span>
</span>
This might help:
.thisText{
position:relative;
top: 20px;
}
.thisText > .hello{
display: none;
}
.thisText:hover> .hello {
display: block;
position:absolute;
top:-20px;
}
<span class="thisText">
This Text
<span class="hello">
Hello
</span>
</span>
I want to move the About button up to the point where it's right below the title but it won't work.
I tried:
In ButtonToScroll.css, margin-bottom: 40%; but it didn't work
In Main.css, I did margin-bottom: inherit; to accompany 1, but didn't work.
What am I doing wrong and how can I fix it?
If you need any other information please let me know.
Here's a sandbox of my project https://codesandbox.io/s/github/name/Encrypt-Your-Code
Easiest way in my opinion would be to give the button position: relative and set top: -80px or whatever you think looks best:
https://codesandbox.io/s/y0pm9l87x9
Set in ButtonToScroll.css
.about { margin-bottom: 10% }
and remove in Main.css
.boxSkull { margin-top: 10% }
Furthermore you should have only one <body> tag in html document.
Add a value in ButtonToScroll.css under text-decoration: none; called:
margin-top: -10%;
It will move everything up from the About button downwards.
This is frustrating! I cant get my click event handler to work. I have spent hours on trying to figure out what the issue is but failed.
Below is my template code:
<template name="ViewStats">
<div class="tileMenu" > </div>
</template>
The tileMenu has an embedded image, large enough to be clickable.
I even tried replacing the embedded image with larger images in hope to increase the clickable area, but nothing seems to make any difference.
Following is my css:
.tileMenu{
position: absolute;
left: 115px;
z-index: 2;
height: 49px;
background: url(images/tileMenu.png) no-repeat;
top: 1px;
display: block;
height: 24px;
margin-left: 1PX;
margin-top: 2px;
float: left;
width: 17px;
background-repeat: no-repeat;
background-position: right 4px top 3px;
background-size: 75% 75%;
}
And now for the event handlar which fails to fire up.
What am I doing wrong?
Template.ViewStats.events({
'click .tileMenu': function (event) {
alert("You clicked tileMenu");
}
});
Can someone kindly explain why my alert function fails to fire up?
Thanks in advance!
Your template event code is fine, it should be working.
Because of that, I think the reason your actual event isn't happening is because your click isn't registering on the div you are targeting.
This may be due to the fact that the div is positioned weirdly or under another div. Try removing all your styles and clicking the div. Also try inspect the element to see where the actual tileMenu div is on your page.
Temporarily put some content in the div as a visual test. So you know where you are clicking is the div. Example:
<div class="tileMenu" > CLICK ME CLICK ME CLICK ME </div>
I suspect once you remove the styles or locate where the div is and click it you will see your alert fire.
A div with no content is 'hard to click'. Put some content in there so you can make sure you're really clicking on the div. Try adding text and testing. Alternatively try putting the image in actual HTML instead of background
I've been looking into this for a couple of hours now and I simply can't understand what is the problem. I've been able to isolate what's wrong into this fiddle: http://jsfiddle.net/6r781vz3/. Click on the Tab 2! then click to add a new tab three times. You'll notice the spacing is different, also the raw tabs seem to move when selected.
I've built a pure CSS tabbed pane with the famous radio button hack. It works great. I've noticed, though, that it needed a strange padding to make it work (see code below). They are simply a <input> followed by a <label> and then a <div>, as it can be seem in the example.
When I tried to add a dynamic new tab to it I noticed this padding wasn't necessary, but what I found strange is that the HTML structure is the same, but it's behaving differently.
/* I only need this for raw html, and I have no idea why!
Not even idea why I would need this for anything!
I don't need them for dynamic tabs... */
.tabs .tab [type="radio"]:checked + .tab-label {
margin-right: -6px;
}
.tabs .tab [type="radio"]:not(:checked) + .tab-label {
margin-right: -10px;
}
I'm probably overseeing something really simple. I don't think this is a bug, since it works this way on Chrome and on Firefox here.
Can anyone see the problem? :(
Because when using display: inline-block space between elements become visual space on the browser. You can handle this with some solutions. One is to use font-size: 0 to parent element and specific one on child like:
.tabs .tab {
display: inline;
font-size: 0;/*set font size to 0*/
}
.tabs .tab-label {
background-color: rgba(255, 0, 0, 0.3);
font-size: 16px;/*set desire font size*/
display: inline-block;
padding: 7px;
margin: 1px;
position: relative;
vertical-align: bottom;
border-right: 1px solid #ddd;
}
Also a fiddle
I currently have a div appearing on hover, but it just pops up rather than sliding in:
#home-heroImage{
padding: 0px;
margin: 0px auto;
width:980px;
height: 525px;
position: relative;
z-index: 1;
background-color: #fcba2e;
}
#home-hero-pop{
background-color: #ffffff;
opacity:0.8;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
font: 16px Helvetica,Arial,sans-serif;
font-weight: bold;
color: #6d6e70;
text-align: left;
padding: 10px;
position: absolute;
right: 0px;
top: 0px;
height: 505px;
width: 460px;
z-index: 2;
}
Fiddle.
After looking through the posts on SO, I found this example, which would work if I could get it to slide in from the right instead of the bottom. I don't know much about JavaScript or jQuery so the modifications I've tried to make to this code are not producing the desired effect:
$(document).ready(function(){
$('.up-down').mouseover(function(){
$('.default').stop().animate({
height: 0
}, 200);
}).mouseout(function(){
$('.default').stop().animate({
height: 200
}, 200)
})
});
Fiddle.
I've tried reading several JavaScript articles online but they're over my head right now.
Based on the example you give, here's it sliding in from the right.. is this what you are after? http://jsfiddle.net/jPneT/208/
EDIT 2017
Too much jQuery
You're right, here's a CSS alternative
.left-right {
overflow:hidden;
height:200px;
width:200px;
position:relative;
background-color:#333;
}
.slider {
width:200px;
height:200px;
position:absolute;
top:0;
right:-200px;
background-color:#000;
color:#fff;
transition:0.4s ease;
}
.left-right:hover .slider {
right:0;
}
<div class="left-right">
<div class="slider">Welcome !</div>
</div>
My answer uses no JavaScript. CSS can handle this automatically for you.
Here's a link to a fork of your code as a working example:
http://jsfiddle.net/g105b/Adk8r/11/
There is only a little change from your example. Rather than hiding the element and showing it with display property, the element is placed off-screen using right: -480px (where 480 is the cumulative width), and moving it to right: 0 when the mouse hovers.
Using CSS transitions provides the animation, and support is very good now: http://www.caniuse.com/#search=transition
This technique allows all browsers back to IE6 view and use your website, but users with older browsers will not have an enhanced experience. Unless you require the animation - as in, it is a feature for it to animate - I would suggest using CSS transitions to futureproof your website and use web standards.
Users of deprecated browsers deserve a deprecated experience.
Fiddle: http://jsfiddle.net/BramVanroy/Adk8r/10/
As said: please learn to write logical and correct HTML. Your markup is invalid and unlogical. You should perfect your HTML and CSS and then study JavaScript and jQuery rather than trying to get a hang of everything at once. This code is a pain to the eye.
Here's what's wrong:
Try to avoid large chunks of inline style and JavaScript.
You use a span where one would use a heading-tag (<h1>Welcome</h1>) and style it via CSS.
You use line breaks <br /> where one would use paragraphs:
<p>This div appears on hover but I would like to slide in from the right instead of just appearing.</p>
There's no structure in your code. This is not necessary to create a working website, but it's good practice to give child elements an indent of two or four spaces. This way, it's very clear for yourself which element is which child or parent. The same is true for your CSS rules: it's better to put your selector first and then the rules (indented) like so:
h1 {
font-weight: bold;
font-size: 160%;
}
You have a closing </a> tag but there's no opening <a>.
There is a very simple way to do it using css3.
instead of going through the hassle of javascript
try something like in the CSS:
div.move {
height: 200px;
width: 200px;
background:#0000FF;
color:#FFFFFF;
padding:10px;
}
/*on mouse hover*/
div.move:hover {
/*General*/
transform:translate(200px,100px);
/*Firefox*/
-moz-transform:translate(200px,200px);
/*Microsoft Internet Explorer*/
-ms-transform:translate(200px,100px);
/*Chrome, Safari*/
-webkit-transform:translate(200px,100px);
/*Opera*/
-o-transform:translate(200px,100px);
}
in the HTML:
<div class="move">Anything is here moves!</div>
Also the translate works on an x/y axis.
This is very simple. All you need is HTML, CSS and jQuery.
Make a solid div.
Make the parent div to hide overflow (overflow:hidden) in CSS.
Assign a margin-left of 100% (or some length) that the required div hides away because of margin.
Do a jquery animate() function to bring down margin-left to 0 or 0%.
You can also set the speed of animation by giving time in ms (milliseconds) or some expression like slow or fast