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

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);
});

Related

Unable to get the tab content on right side

I have a peculiar problem of tab content not floating on right side as its tabs are on right side too. Below is the picture to get a better idea:
I have tried floating the tab content right but not working. Rather its going past right where I can't see anything. This problem exists for both Live Chat and Mail Us tabs.
Below is the codepen.
HTML Code
<div class="tab-pane livechat wow animated bounceInLeft" id="chat">
<div class="chatwidget">
Click for Chat
</div>
</div>
CSS3
.livechat {
position: absolute;
bottom: 0px;
width: 50%;
background-color: #eee;
height: 370px;
text-align: center;
box-shadow: 0 0 20px grey;
float: right;
}
.chatwidget {
padding: 150px;
font-size: 24px;
}
To right align an absolute positioned element, use right: 0; instead of float: right, float has no effect on absolute positioned elements.
Updated codepen
.livechat {
position: absolute;
bottom: 0px;
width: 50%;
right: 0;
background-color: #eee;
height: 370px;
text-align: center;
box-shadow: 0 0 20px grey;
}
Instead of float:right, use right:0px;
.livechat {
position: absolute;
bottom: 0px;
width: 50%;
background-color: #eee;
height: 370px;
text-align: center;
box-shadow: 0 0 20px grey;
right: 0;
}
Before you add position: absolute to the livechat element you should add position: relative to its one of parent elements as below mentioned. Better it is to body tag. And put right: 0; instead of float: right;.
body{
position: relative;
}
.livechat {
position: absolute;
bottom: 0px;
width: 50%;
background-color: #eee;
height: 370px;
text-align: center;
box-shadow: 0 0 20px grey;
right: 0;
}

Active Page Triangle Marker in CSS

I'm looking to create an active page marker like the one pictured. The title probably doesn't do a great job of describing what I'm trying to do here.
What I'm looking for is a border that has an curved triangle active page marker using CSS.
Here is a simple solution using to <div> tags only.
Setting the width of both container wil set the triangle on different placeses.
body {
margin:0;
width: 100%;
}
* {
box-sizing: border-box;
}
.right {
float: left;
border-bottom: 5px solid black;
width: 50%;
height: 100px;
border-radius: 0 0 40px 0;
}
.left {
float: right;
border-bottom: 5px solid black;
width: 50%;
height: 100px;
border-radius: 0 0 0 40px;
}
<div class="right"></div>
<div class="left"></div>
This is a relatively simple way to achieve the result using a single corner border radius on two small divs with a bottom border - to move the 'triangle', you only need to adjust the left position of the `container' element. It's not perfect, as the border fades towards the tip of the pointer, but it may pass the aesthetics test:
#line {
border-bottom: 3px solid #888888;
position: relative;
width: 500px;
height: 53px;
}
#container {
position: absolute;
bottom: -2px;
left: 200px;
width: 100px;
background: #ffffff;
}
#left,
#right {
float: left;
border-bottom: 3px solid #888888;
height: 50px;
}
#left {
width: 50px;
border-radius: 0 0 50% 0;
}
#right {
width: 50px;
border-radius: 0 0 0 50%;
}
<div id="line">
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
EDIT: The display in the sandbox seems to be inconsistent - here's a FIDDLE
You could play with before, after & border-radius to achieve it.
See an example here: http://codepen.io/anon/pen/RNqPpy

jquery .animate() sliding issue

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

Opacity or Page Background is showing on half page on Pop Up

I am making a pop up on one of my project.
CSS Code
<style type="text/css">
#modalPage
{
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgba(0, 0, 0, 0.95);
z-index: 999;
}
.modalContainer
{
position: absolute;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
z-index: 999;
}
</style>
Content CSS
.modal
{
background-color: #6f9255;
position: relative;
top: -300px;
left: -305px;
z-index: 1000;
width: 600px;
overflow:auto;
}
JAVASCRIPT Code
<script type="text/javascript">
function myFunction() {
document.getElementById('modalPage').style.display = "block";
}
function hideModal()
{
document.getElementById('modalPage').style.display = "none";
}
</script>
HTML Code
<div id="modalPage">
<div class="modalContainer">
<div class="modal"> </div>
</div>
</div>
But the problem is that, it is fine but the opacity or page background which I putting on it, it is displaying on half page, not on full page.
Displaying by this code. background-color: rgba(0, 0, 0, 0.95);
Please tell me, where is the problem.
I can't keep the position fixed, because my pop up is longer then original page size and it is coming with scroll and cross the footer link too.
Any help will be appreciated.
Thanks
I think the problem is not related with an opacity issue. You say that your .modalContainer is 100% width and height but you start it at 50% top left. So the whole thing is 150% width and height, while #modalPage is only 100% width and height.
If you know the exact width and height of your container I suggest you to simply modify your css to center propertly the container. For example:
.modalContainer
{
position: absolute;
width: 50%;
height: 50%;
left: 25%;
top: 25%;
z-index: 999;
background-color: red; /*added to see where the container is*/
}
Working example:
http://jsfiddle.net/L2cXP/
If you want a modal longer than the page itself, i suggest a new approach.
We can ignore vertical centering because the modal is longer than the page. We just want that #modalPage has a overflow: auto property so it will show a scrollbar when its contents are longer than it.
Probably you would like to add an overflow: hidden property to the body when the modal shows to block the standard scrollbar of your page.
Check this working example:
http://jsfiddle.net/L2cXP/1/
try:
#modalPage {
position: fixed;
}
http://jsfiddle.net/68Sty/
.modalContainer has a "left" of 50%, so starting at halfway is expected. Try something like:
.modalContainer {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
right:0;
bottom:0;
z-index: 999;
}
try this
<div id="modalPage">
<div class='relative'>
<div class="modalContainer">
<div class="modal"> </div>
</div>
</div>
</div>
your css
.relative{
position:relative;
zoom:1;
height:100%;
width:100%;
}
A little CSS magic - and we have simple and nice CSS popups with no javascript positioning! consider this demo:
HTML:
<div id="modalPage" class="csspopup-overlay">
<div class="modalContainer csspopup-popup">
<div class="csspopup-close" onclick="hideModal()">×</div>
<div class="modal">Some modal content</div>
</div>
</div>
I define .csspopup-overlay and .csspopup-popup in CSS as follows:
.csspopup-overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
text-align: center;
}
.csspopup-overlay:after, .csspopup-valignfix {
display: inline-block;
*display: inline;
*zoom: 1;
height: 100%;
width: 0;
vertical-align: middle;
content: '';
}
.csspopup-popup {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
max-width: 80%;
padding: 15px;
box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
background: #FFF;
vertical-align: middle;
border-radius: 6px;
}
.csspopup-popup > .csspopup-close {
display: block;
position: absolute;
top: -15px;
right: -12px;
width: 12px;
height: 12px;
padding: 4px;
border: 4px solid #fff;
border-radius: 50%;
box-shadow: inset 0 2px 2px 2px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, .4);
cursor: pointer;
background: #555;
color: #FFF;
text-align: center;
font-size: 12px;
line-height: 12px;
text-decoration: none;
font-weight: bold
}
Demo: http://jsfiddle.net/acA73/
Note: I extracted these CSS for you from https://github.com/dfsq/cssPopup jQuery plugin.

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