I'm setting up some jQuery to check if a hotspot is visible on the screen to determine if a help message displays on screen or not. If the hotspot is visible it should not display the help message at all.
So far I've got some script to turn off the help message if you hover the hotspot after the help message fades in. However, I'm unsure how to check before the help message fades in if the hotspot has been hovered.
The main reason for this functionality is that both messages are in the same place on the page and at the moment it creates a stacking effect.
Please find my script along with an example of the issue so far below.
If you hover over the hotspot and then refresh the window with the cursor still on the hotspot you should see my problem.
$(document).ready(function() {
$('.ws-hotspot').hover(function(){
console.log("appeared");
$('#ws-hotspot-helper').css('display', 'none');
$(this).find(".ws-hotspot-view-more").animate({opacity: 0.8, marginLeft: "26px"},200);
},function(){
$('#ws-hotspot-helper').css('display', 'none');
$(this).find(".ws-hotspot-view-more").stop().animate({opacity: 0, marginLeft: "22px"},50);
});
function hotspotHelper(){
if(!$('#ws-hotspot-one .ws-hotspot-view-more').css('opacity') == 0.8){
console.log("appeared");
$('#ws-hotspot-helper').css('display', 'none');
}
else {
$('#ws-hotspot-helper').delay(1000).fadeIn(1000).delay(5000).fadeOut(1000);
};
};
$(hotspotHelper);
});
.ws-hotspot{
z-index: 9999;
position:absolute;
background:blue;
width:55px;
height:55px;
}
#ws-hotspot-helper{
background:yellow;
background-repeat: no-repeat;
background-position: 1px -22px;
display: none;
min-width: 130px;
padding: 0.37rem;
padding-left: 1rem;
position: absolute;
top: calc(16% + 9px);
left: calc(58% + 27px);
border-radius: 3px 10px 10px 3px;
border: 1px solid #c5c5c5;
border-width: 1px 1px 1px 0px;
font-size: 0.95rem;
color: #58595b;
}
#ws-hotspot-helper span#ws-hotspot-helper-arrow{
margin-left: 10px;
margin-right: 3px;
font-weight:400;
font-size:1rem;
}
.ws-hotspot .ws-hotspot-view-more{
display: inline-block;
opacity: 0;
background:yellow;
background-repeat:no-repeat;
background-position: 2px -22px;
margin-left: 24px;
margin-top: 9px;
min-width: 80px;
padding: 7px;
padding-left: 25px;
font-size: 0.87rem;
border-radius: 3px 10px 10px 3px;
border:1px solid #c5c5c5;
border-width:1px 1px 1px 0px;
color:#58595b;
text-align:center;
}
.ws-hotspot#ws-hotspot-one{
top: 16%;
left: 58%;
}
#red-box{
position:relative;
background:red;
width:100%;
height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="red-box">
<span id="ws-hotspot-helper"><span id="ws-hotspot-helper-arrow">◀ </span>find out more</span>
<span class="ws-hotspot" id="ws-hotspot-one"><span class="ws-hotspot-view-more">view more</span></span>
</div>
So I found that the .fadeIn() would still run on the ws-hotspot-helper element after the .delay() despite the if statement setting it to display none. Therefore I switched out the line:
$('#ws-hotspot-helper').css('display', 'none');
For
$('#ws-hotspot-helper').remove();
This solved the problem instantly as it simply takes it out of the page on hover of the "view more" element.
Hope I helped someone out by replying to this.
Related
i have a question about a div being longer then it's parent div.
My page is looking as followed:
<div id="wrapper">
<div id="top">
</div><!--/top-->
<div id="middle">
<div id="keep_up">
<div id="thread_menu">
<div id="new_thread">
New threads in here
</div>
<div id="active_thread">
Active threads in here
</div>
</div>
</div><!--/keep_up-->
</div><!--/middle-->
<div id="bottom">
</div><!--/bottom-->
</div>
And the css (Will skip the top div since that is working fine).
html,body {
margin: 0;
padding:0;
height:100%;
}
#wrapper {
min-height:110%;/*Did this, so the page will be a little longer already*/
position:relative;
}
#middle{
width: 80%;
margin-left: 10%;
padding-bottom: 30px;
}
#bottom {
color: white;
background:#000;
width:100%;
height:20px;
position: absolute;
bottom:0;
left:0;
text-align: center;
font-weight: bold;
}
#thread_menu{
float: left;
width: 17%;
}
#new_thread{
height: 80%;
width: 100%;
border-left: 2px solid black;
border-bottom: 2px solid black;
border-right: 2px solid black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#active_thread{
height: 80%;
width: 100%;
margin-top: 5%;
border-left: 2px #000 solid;
border-bottom: 2px #000 solid;
border-right: 2px #000 solid;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
Now, i fill the active and new_thread div with 15 items that i retrieve from my database. Same with Active_thread div. However, on a big screen the results will show fine (As it should). But on a small screen (laptop) it shows it like this:
(The browser is not that big, you always need to scroll a little bit down in order to see the footer (See height: 110% in wrapper))
Question: how do i make my thread_menu push the footer down and keep it inside my wrapper or at least middle div?
(Used the tags Jquery and Javascript because i'm not sure how to solve this problem, and it might needs one of those).
Image EDIT:
Looks like #threadMenu is floated left, this pulls the element out of the flow of the document, so it will not effect the containing divs height!
You could use JS to get the #threadMenu height, then push the content down by this much, but thats not an ideal solution!
I'm assuming the 'menu-items' on the image is the #thread_menu in the CSS. When you float something in the CSS, you're taking it out of the flow. Meaning they won't listen to what it's parents has to say.
What you can do is use display: flex; flex-direction: row; on the middle, force #thead_menu to use a base of 17% by using flex: 0 0 17%.
See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for detailed information on how to use flexbox
Remove the following styles from #bottom
position: absolute;
bottom:0;
left:0;
Add a clearfix for #keep_up (see examples mentioned by Michael_B)
#keep_up:after {
content:"";
display:block;
clear:both;
}
JSFiddle Link
Note: changed id="Middle" to id="middle" in your fiddle example
I want to display a "Share Popup" when a specific Div appears. I am using an embedded quiz on my website which the user has to answer multiple choice questions then gets a result. The result div class is called result_screen_container.
I already have the popup but it's written to be triggered by time. I want it to trigger when the result is there after all questions are finished.
#popup_box {
display:none;
position:fixed;
_position:absolute;
left: 50%;
top: 50%;
z-index:10001;
background:#fff;
box-shadow: 0px 0px 15px #000;
border-radius: 8px;
}
#popup_box .inner1 {
text-align: center;
padding:0 40px;
color:#000;
padding:20px;
}
#popupBoxClose {
font-size:0;
right:-22px;
top:-14px;
position:absolute;
cursor: pointer;
width: 38px;
height: 37px;
display: block;
}
/* Popup ends */
#fbshare{width:275px;height: auto;overflow: hidden;}
.inner-fbshare{width:275px;overflow: hidden;}
.inner-fbshare h3{font-size: 19px;margin: 0 0 10px 0;}
.inner-fbshare img{width:275px;height:150px;}
.outer-fbshare{width:275px;height: 45px;overflow: hidden;}
.fbshare_bt
{
font-size: 22px; background:none repeat scroll 0 0 rgb(64, 94, 159);color:#FFF;
text-align:center;margin-top:10px;padding: 12px;
border-radius: 8px;
font-weight: bold;
}
.fbshare_bt:hover{color:#FFF;text-decoration:none;}
.close_fbshare{float: right;color: #A3A3A3;text-decoration: none;}
.sa-icon.sa-custom {
background-size: contain;
border-radius: 0;
border: none;
background-position: center center;
background-repeat: no-repeat;
}
The div has to be hidden, then;
var yourDivvisible = document.getElementById("YOURDIVID").style.visibility = "visible";
if(yourDivvisble === true){ */ do something here to display your popup */ }
Something like this?
So I have created a box in css like this:
#box
{
background-color: #5d5d5d;
border-radius: 2px 2px 2px 2px;
box-shadow: 5px 5px 2px #767676;
height: 200px;
width: 1100px;
}
with the result of
What I want to do without overlaying a smaller whitebox, and without messing up the shadow effect is something like this:
Is this possible, or am I going to have to just add a smaller whitebox over the top and play with the layering and shadow effects until they're about right?
Or maybe there is a way using JavaScript or something like that?
NB: What I don't want to do is just create the box in photoshop as this will slow overall load time of the page
option:1 boxshadow
body{padding:40px}
#box
{
background-color: white;
border-radius: 2px 2px 2px 2px;
box-shadow: 14px -88px 0px white,5px 5px 2px #767676,inset 199px -88px 0 #5d5d5d;
height: 200px;
width: 510px;
}
<div id=box />
option:2 pseudo element see #Fahad Hasan
You can use the :before pseudo-element to achieve what you're trying to do like this: DEMO. This is the CSS which I've added:
div#box:before {
content:'';
background: white;
width: 700px;
display: block;
height: 100px;
float: right;
}
You can create an ::after pseudo-element with a white background, float it right and offset it to move over the shadow:
#box::after{
content:'';
width:500px;
height:100px;
position:relative;
float:right;
top:0px;
right:-7px;
background-color:#fff;
}
You should try with pseudo elements, this is an example:
HTML:
<div id="mydiv"></div>
CSS:
div#mydiv{
width:300px;
height:300px;
background-color:red;
}
div#mydiv::after {
content: ' ';
display: block;
background-color: blue;
width: 270px;
height: 100px;
float: right;
}
Here is a demo
Sliding is coming from center because i have given width:100%; left: 50%; .
Slide is coming from left to right, but i want this to start from right to left. I suspect this is a CSS issue. I tried changing CSS but nothing helps. Please someone locate the mistake and help me to proceed. Thanks
FIDDLE
Css Code:
.sidebar_list
{
float:left;
display: none;
position: fixed;
width:100%;
top: 57px;
bottom: 0px;
left: 50%;
right: 0px;
overflow: hidden;
line-height: 2em;
border-left: 1px solid black;
border-bottom: 1px solid black;
padding: 10px;
height: 100%;
color: #ffffff;
background: #33B5E5;
}
$(".logo").click(function()
{
$(".sidebar_list").animate({
width: 'toggle'
}, 200)
});
remove left:50% from your css. It works
Working fiddle
I am working on Cordova 3.1.0 And Android 17.
my html code for pop
<div id="rightNavPrpPopup1" data-role="popup" class="r-menu-dropdown">
<div class="r-menu-triangle" ></div>
<a class="class-a" data-transition="slide">A</a>
<a class="class-b" data-transition="slide">B</a>
<a class="class-c" data-transition="slide">C</a>
<a class="class-d" data-transition="slide">D</a>
</div>
and my CSS is
.r-menu-dropdown{
margin: 30px 5px 0 0;
border-bottom: none;
}
.r-menu-dropdown a{
padding: 10px;
display: block;
color: #fff !important;
text-decoration: none;
border-bottom: 1px solid #666;
background: #555;
}
.r-menu-dropdown a:hover, .r-main-menu-dropdown a:hover{
background: #444;
}
.r-menu-triangle{
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 7.5px 13px 7.5px;
border-color: transparent transparent #555 transparent;
position: absolute;
right: -1px;
top: -14px;
}
And my problem is that when my orientation is change then my pop is not set according to css Pop is going to center(on both mode). if i didnot change my orientation then my pop is coming properly. On the flying time of popup if I change my orientation then it is going to center and never come back to my privious position even i swap the orientation.
How can I resolve this issuue please help me? Thanks in Advance
You need to specify absolute or fixed position for .r-menu-dropdown
.r-menu-dropdown{
position:fixed;
right : 30px; // change according to your requirement
top : 40px;
border-bottom: none;
}
choice between fixed or absolute depends on if you want the popup to scroll with rest of the content or not.
Call any repaint in browser. In your css code there is nobody to repaint for browser when orientation is changed.
Try to add style:
html, body {
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
}