jquery .animate() sliding issue - javascript

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

Related

Check onload to see if element visible, if not show another element

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.

How do I create curved css content divider?

I'm working on a small web project and got a nice little detail on the page: a curved content divider. Usually those are just lines, but this is not. So I was thinking about, how to code that in CSS or possibly with SVG, but I'm not sure exactly how it could work. Here you can see what I mean:
As you can see, the gray content above ends exactly with the orange curve and the white content part beneath start along the curve. Is there any way to code it with css or svg, instead of using images?
Thank you! I highly appreciate any help.
This was my best with CSS rounded corners ... can get better
.divider {
width: 100%;
height: 51vw;
position: relative;
overflow: hidden;
background: #fff;
}
.divider:after,
.divider:before,
.divider b:after,
.divider b:before {
content: "";
display: block;
position: absolute;
}
.divider:after {
width: 63.7%;
height: 62.5%;
border-radius: 50% 50% 0 0/50%;
bottom: -4px;
left: -7.5%;
border: red 2px solid;
border-right: transparent 2px solid;
}
.divider:before {
width: 63.6%;
height: 63.7%;
border-radius: 0 0 50% 50%/50%;
right: -7.5%;
top: -4px;
background: #eee;
}
.divider b {
display: block;
width: 50%;
height: 100%;
background: #eee;
}
.divider b:after {
width: 63.7%;
height: 62.5%;
border-radius: 0 0 50% 50%/50%;
right: -7.5%;
top: -4px;
border: red 2px solid;
border-left: transparent 2px solid;
}
.divider b:before {
width: 63.6%;
height: 63.7%;
border-radius: 50% 50% 0 0/50%;
bottom: -4px;
left: -7.5%;
background: #fff;
}
<div class="divider"><b></b></div>

Not able to set overflow: hidden; on a div

I am not able to set overflow: hidden; on div wrapper for this script.
Please look at this js fiddle.
http://jsfiddle.net/CwzAD/1/
My aim is to display 10 cells (200 px in height) on the page and showing only animation within this limit, so to act as a mask.
Any idea what I am doing wrong? Any alternative approach even using JavaScript if with only CSS is not possible?
*{
margin: 0;
padding: 0;
}
#pageset {
position: fixed;
top: 0px;
left: 0px;
width: 500px;
height: 200px;
border: 1px solid rgba(0,255,255,1);
-webkit-box-sizing:border-box;
}
#wrapper {
position: fixed;
top: 0px;
left: 0px;
width: 500px;
background-color: green;
/*overflow: scroll;*/ /* PROBLEM HERE----------------*/
/*height: 200px;*/ /* PROBLEM HERE----------------*/
}
#navigator {
position: absolute;
left: 600px;
}
ul {
list-style: none;
/* margin:0px;
padding:0px;*/
}
li:nth-child(even) {
background: #d80000;
}
li {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin: 0px;
}
.focus {
background-color: yellow !important;
}
.btn {
float: left;
width: 50px;
height: 50px;
border: 2px gray solid;
margin: 10px;
background-color: #f0f0f0 ;
}
.icon {
width: 60px;
height: 60px;
border: 2px gray solid;
margin: 10px;
background-color: #99ff66;
}
Solution here
http://jsfiddle.net/Uz5a9/
Basically, what you need to do is use the #wrapper div as a container, which is only 200px high.
The .content div you generate should then scroll inside that wrapper.
To accomplish this you need to position the wrapper relatively, and then position the content div absolutely inside the wrapper. The wrapper should never move around.
The content can be as high as you want, the wrapper should always stay 200px high.
Check the following fiddle, which demonstrates exactly this: http://jsfiddle.net/Uz5a9/
Try this css it will work fine DEMO HERE
.content {
height:200px;
overflow:hidden
}
Just apply these additional rules to #wrapper:
#wrapper { max-height: 200px; overflow: hidden; }
and it seems to work just as described.

firefox's strange behavior using jQuery animate method and absolute position

I have a problem when I'm using jQuery's(jQuery1.9.1) animate method.
Here is my code in jsfiddle: http://jsfiddle.net/AySas/3/
I want to make the div wider using the relative percentage, ie:
html:
<div id="h_divCenter">
<div id="h_divIETodos" >
<div id="h_divIIEodoList" class="quadContent">
<ul id="h_ulIETodoList">
<li>itemC 3</li>
</ul>
</div>
</div>
css:
#h_divCenter {
position:absolute;
top:0;
left:20px;
right:100px;
bottom:0;
margin: 5px;
background: #0FF;
}
.quadContent {
position: absolute;
top: 41px;
bottom: 2px;
padding: 1px 1% 2px 1%;
width: 98%;
}
#h_ulIETodoList,#h_ulIUTodoList,#h_ulUETodoList,#h_ulUUTodoList {
width: 100%;
height: 100%;
list-style-type: none;
overflow: auto;
}
#h_divIETodos {
position: absolute;
margin: 2px;
top: 0;
left: 0;
right: 50%;
bottom: 50%;
color: #DE3C3C;
border: 1px solid #DE3C3C;
-webkit-box-shadow: 0px 0px 10px #DE3C3C;
-moz-box-shadow: 0px 0px 10px #DE3C3C;
box-shadow: 0px 0px 10px #DE3C3C;
}
javascript:
$('#btnTest').on("click", function(){
$("#h_divIETodos").animate({
right: "+=20%"
},500);
});
And this div has a absolute position and I have set the top,right,bottom,left properties of css. It works fine in chrome. But in firefox, you can see the right edge of the div cannot move by "20%". Has someone else encountered with the similar problem before? I really appreciate your help. Many thanks!
You can work with calculated pixels instead. Works as expected.
jsFiddle Demo
$('#btnTest').on("click", function(){
$("#h_divIETodos").animate({
right: "+=" + ($(this).parent().width() * 0.2) + "px"
},500);
});

Blur Images on Popup

Is there any way on a pop up to not just blur the text, but images in the background? I have attached a visual.
Maybe blur.js can help you out !!
Lookout for the demo.
This is what you are looking for. CSS3 Lightbox.
They have made a similar implementation of a popup and then blurring the background. Check it out. I am sure it will help with what you are doing.
This is how stackoverflow does it.
HTML
<div class="popup">
<div class="blur-bg"></div>
<div class="popup-win"><img src="foo.jpg"/></div>
</div>
CSS
.blur-bg{
position: absolute;
top: 0px;
z-index: 1000;
opacity: 0.5;
height: 2323px;
left: 0px;
width: 100%;
background-color: black;
}
.popup-win{
position: fixed;
width: 400px;
z-index: 1001;
top: 50%;
left: 50%;
display: block;
margin-top: -85px;
margin-left: -215px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
background-color: #fff;
padding: 15px!important;
}

Categories