How can I make chat picture overlaps site contents.
http://www.foxpic.com/VOsuXV0B.png
the CSS code
<style>
.livezilla{
float:right;
position: fixed;
bottom: 0px;
}
</style>
The live chat bottom code
<div class="livezilla" style="text-align:right;width:201px;"><!-- LiveZilla Chat Button Link Code (ALWAYS PLACE IN BODY ELEMENT) --><!-- LiveZilla Tracking Code (ALWAYS PLACE IN BODY ELEMENT) --><div id="livezilla_tracking" style="display:none"></div><script type="text/javascript">
var script = document.createElement("script");script.async=true;script.type="text/javascript";var src = "http://yaradress.com/livezilla/server.php?a=81cbf&rqst=track&output=jcrpt&nse="+Math.random();setTimeout("script.src=src;document.getElementById('livezilla_tracking').appendChild(script)",1);</script><noscript><img src="http://yaradress.com/livezilla/server.php?a=81cbf&rqst=track&output=nojcrpt" width="0" height="0" style="visibility:hidden;" alt=""></noscript><!-- http://www.LiveZilla.net Tracking Code --><img src="http://yaradress.com/livezilla/image.php?a=00e3a&id=1&type=inlay" width="201" height="53" style="border:0px;" alt="LiveZilla Live Chat Software"><!-- http://www.LiveZilla.net Chat Button Link Code --><div style="margin-top:2px;"> </div></div>
The problem occurs because of position: fixed; in CSS.
Is there any way to fix it ?
I found the solution.
you have to add this code to CSS
z-index: 100;
Related
I am building a responsive website that has an embedded youtube video on it. The video is in a responsive iframe and works perfectly fine in all browsers except in Firefox. There it simply doesn't show up.
I tried savemode, adding html5 to the link, commenting all js and js-queries out. If I add the width and height in px it does show and works fine, but then it's not responsive.
I can make it show up by changing the height of the container into a percentage or vw-value. No matter what figure I add, it will always render the video double height and cutting off big parts of left and right sides. Also it will cut off more of the width when the viewport shrinks. When changing the container value to anything other than 0, the same happens in all other browsers.
Tried Firebug, but that doesn't even see the iframe.
Here is the code:
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
margin-bottom: 4vw;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="embed-container">
<iframe src='https://www.youtube.com/embed//EyhQN24InWg?html5=1' frameborder='0' allowfullscreen></iframe>
</div>
web url:
https://www.marjanderksen.com
Have you tried to use FitVids.js?
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script>
$(document).ready(function(){
$(".embed-container").fitVids();
});
</script>
Link to download plugin: https://github.com/davatron5000/FitVids.js
I have a Swiffy ad unit that is essentially showing duplicated (stacked) and is bleeding into a module beneath it. As you scroll past it, the duplicated version goes away. Attached is a screenshot and the Swiffy ad code. Any idea what I can do to the code to prevent this?
<style>html, body {width: 100%; height: 100%}</style>
</head>
<body style="margin: 0; overflow: auto">
<div id="swiffycontainer_%ecid!" style="width: 300px; height: 250px">
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer_%ecid!'),
swiffyobject, {});
stage.setFlashVars("clickTag=%%CLICK_URL_ESC%%%%DEST_URL%%");
stage.start();
</script>
</body>
Results in:
I think you should use iframe to contain that swiffy thing
I am building a responsive web site and I am finding that Auto Image resize with broswer window resize using img max-width:100% works in Chrome but not IE and Firefox when any parent or ancestor has position:absolute;
(For information about this technique see
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
)
The following code can be used to demonstrate or reproduce this problem. you can also see this at http://sketchmotion.com/image-test2/. You will notice that resizing the browser window will resize the image in Chrome but not IE (I am running IE 11) . However, if you remove the following lines:
.mydiv{
position: absolute;
}
You will find that it now works in both Chrome AND IE.
This is not helpful since I I use position: absolute; on some of my parent divs on my site. And I need my site to work in IE and Firefox.
Please let me know if there is a work around for this problem so I can get the images to resize with the browser window on my site.
<html>
<head>
<!-- <link href="/cssh/ImageTest.css" rel="stylesheet" type="text/css"></link> -->
<style type="text/css">
.mydiv{
position: absolute;
}
img{
/*** Scaling Images with the Browser Window in CSS is pretty simple to implement for both images and video. ***/
/*** You can set the media element’s max-width to 100 percent, and the browser will make ***/
/*** the image shrink and expand depending on its container. ***/
/*** To maintain the right proportions use auto height ***/
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
</style>
</head>
<body>
<!-- -->
<div class="mydiv">
<div class="slides">
<div class="slide">
<img alt="" src="http://sketchmotion.com/ImagesSM/SM_Slider_1_SketchMotion_w_Sketch.jpg" />
</div>
</div>
</div>
</body>
</html>
Try this:
.mydiv {
position: absolute;
width: 100%;
}
I don't have an explanation exactly why, but this works. :)
I confirmed that using width: 100%; for parent and all ancestor divs makes it work in IE. However this is a bit of a pain because often that is not what you want to do. Chrome does not have that limitation and scales the image regardless which seems like a more sensible and consistent approach IMHO.
Thanks again Terry Clancy
For the responsive to work on IE. Do not include pictures in a <table>. Just use <div> and use CSS:
img {
max-width: 100%;
height: auto;
width: auto\9;
}
I have a html document structured with a header, content, and footer divs. I am trying to center an image (a logo) inside my header div to display at the top of my webpage in the middle. I can absolute position it into the middle, but when I change the browser size, the img doesn't move along with it. I want it to be place automatically in the center of the window. I am stumped..?
I have tried , margin-right:auto; margin-left:auto. I have also tried the trick where you make margin-left negative half the width and top 50%, but nothing has worked so far.
html:
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
css:
#header {
background-color:transparent;
height:260px;
width:100%
}
#logo-img{
display: block;
margin-left: auto;
margin-right: auto;
}
Also, Do I even need a container? Not sure if I need javascript for this, or if it can be accomplished with just html/css? Hope someone can help, thanks!
What is happening is that you are already correctly centering your image.
Your problem is that the image is huge. If you notice closely, the image is not centered if your browser window becomes smaller in width than the image.
Remove the white area from the image and it will center correctly.
Edit: in IE, you need to add the rule text-align:center to #header
Another way:
If you don't want to change your image, you can use this hack:
<style>
#header {
overflow-y: hidden;
background-color: transparent;
height: 260px;
width: 100%;
margin-left: 50%;
}
#logo-img{
display: block;
position: relative;
right: 50%;
}
</style>
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
I learned this hack a while ago here
Just use the logo at a size it's supposed to be (like this here), then all you need to do is add the align="center" attribute to your logo's div.
I am writing a simple HTML5 application for iPad and I am looking for a simple jquery solution for page transition. I know you would recommend jQueryMobile but problem with that it uses ajax to loads next page in current page and then kicks off transition so css of the page that I m trying to load is getting disturbed see my question. I also tried this and this plugin was the thing that I was looking for but problem with this is that it is not working with iPad and also page flickers a lot while transition so I dropped this option. Another option I found is jQTouch but as far as I know jQTouch only works for transition effects to div, not sure how to use it for page transition.
What I want is that on click of Transition link in Transition index.html should get displayed with transition effects without flickering and css disturbance of index.html page.
Could someone please recommend me some plugins using which I can achieve page transitions without disturbing CSS while transitions.
Hopefully this works for you... the below solution worked for me although jQuery is needed:
First right after the body tag add this:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your css:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
And finally add this javascript to your page (preferably at the end of your page, before closing body tag of course):
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide(); });
</script>
Then adjust the position of the loading image and the background color of the loading div via the style class.
This is it, works just fine. But of course you have to have an ajax-loader.gif somewhere.
Try AJAXLoad They have some great animated GIF's there.. :)