Positioning the Chat bar (JavaScript) - javascript

I put a script code onto my website, the chat bar appears at bottom of the page, but I need to put the bar into a specific position like coordination of x = 55 y = 90;
Do you have any to process this ?
Here is the code given by the provider,
Thanks in Advance!
<div class = "chat">
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/.../default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
</div>
That chat represents your css codes, thanks in advance

I recommend you using CSS styling for that. You've got 2 options so far.
1. Use a fixed position
.chat {
position: fixed;
top: 90px;
left: 55px;
}
Keep in mind, that if you do so your bar will always stick to its position. This happens 'cause of your fixed position, which means the position is in relation to your window.
2. Use absolute position
With an absolute positioning you can achieve the exact same thing, except of positioning your element in relation to its parent container. So you may place container, in which you also place your chat bar, with an absolute position.
.chat {
position: absolute;
top: 90px;
left: 55px;
}
I would, in your case, recommend using absolute, since fixed will commonly be used for Headers and Footers. Anyways, you are free to explore yourself which one fits to your needs.

I also used Tawk service and was not able to spend tons of time to try to customize the external styles. I will explain my findings.
Tawk devs have own feedback tool and they already have several requests on make it flexible to adjust the positioning or style of the bubble: see here, here and here.
Simply overriding the CSS style wouldn't work as I already mentioned because they force the styles via style attribute on each iframe injected with the loaded js code. style has higher priority in the HTML parser logic of the browser over CSS. Also they use !important and I understand their reasoning - it's important to ensure the consistency of the style in any environment (aka website) it should be appearing in.
You may use JS code on the load. For example I used Reactjs module react-load-script on which you can use custom callback function when the external source is loaded. Then you may do something like
let iframes = document.querySelectorAll("iframe[title='chat widget']")
for (let f of iframes) {
if (f.style.bottom === "auto") {
f.style.bottom = "150px"
} else {
const pxBottom = Number.parseInt(f.style.bottom)
f.style.bottom = pxBottom + 30 + "px"
}
}
to force the updated styles. But. Here's the stone under feet: on the scroll to bottom or the top of the page the script forces updates on the style of the same widget. So I unminified/prettified the source code which is loading and can assure you that's way too much of work to do something on this level.
Conclusion: I used the custom positioning of the bubble set to the middle of the viewport, not to the bottom. Ugly, but works as a temporary fix.

Try to add this code to your css
main {
position: fixed;
top: 50px !important;
right: 0 !important;
box-sizing: content-box;
}

I was also facing the same issue and I am able to figure out on how we can override their default css with our custom css.
Style the Tawk.to chat widget with my custom css

Related

How to input a CSS class with JavaScript to affect another function

I have gone at a lot of informative sites in order to find answer but no luck so far. Thus now asking here.
CSS Class
.toppy {
:-webkit-full-screen {position: relative; top: -1310;}
:-moz-full-screen {position: relative; top: -1310;}
:-ms-fullscreen {position: relative; top: -1310;}
fullscreen {position: relative; top: -1310;}
}
JS Input
window.onscroll = function() {mss()};
function mss() {
var posi = document.body.scrollTop;
document.getElementById("toppy").style.top = -posi;
}
Depending on a position on a web page, this should give the value (posi). Negatived as CSS works on that way, and trying to update CSS with style(top) value (posi). However, no updating.
JS into which CSS influences
function FullScreen() { .... code .... }
CSS affects to this. If CSS has defined without class .toppy, function FullScreen works nicely opening full screen with the CSS's pre-set values (-1310) at the position downwards from the top.
But why is CSS's style property top not being updated by JS input function and therefore changing the position of the FullScreen to open at? My goal is to obtain the full screen to be opened at its current position on page. Some browsers do this automatically, some do not. Thus needing coding.
Or does one have to define a variable in css (e.g. var(--posi)) and proceed on this way but I do not have a real clue how to do that?
Many thanks for replies!
Update:
Thanks for the points. Valid ones. However, as the problem remains, I think the issue here is how to link a css to certain js being the case paricularry with this fullscreen. If I had two identical js fullscreen (expect function name), how would I define above kind of css to one js and another css to another js? As for me, it seems that css for fullscreen is (defined as above) not accepting any id or class tags, or I do not know how to link id to js? Syntaxing? Regards!

Issue with iFrame Element not re-sizing within container

I am working on a small VA project and I am attempting to pull stats from another website. The only way I have been able to find out how to do this, is by using an iFrame with the clip function.
Website is: NWGlobalVA.com
Now the Issue I am having is if you go to the main page and re-size the browser in anyway it pushes behind the map element. I have tried everything in my knowledge and research to make it re-size with the container.
Below is the code I use with the iFrame and CSS to do the clipping. Any help would be much more appreciated then you will understand. I have been trying to do this for a couple days now. Ideally I would rather just get the information once every 15 minutes and pass it to my database. However on the website none of the tables are defined and I would know how to go about that.
<style>
.iframeb {
position: absolute;
left:-384px;
right:0px;
top: -145px;
clip: rect(190px, 625px, 350px, 400px);
}</style>
<iframe width="890" height="1900" src="http://fscloud-infotool.de/index.php?page=vasystem&subpage=vadetails&id=10277" class="iframeb" scrolling="no" frameborder="0"></iframe>
The way I deal with iframe size is with javascript (jquery):
I calculated the original iframe aspect ratio by taking the width/height. So in your case: 890/1900.
<script>
function size_iFrame()
{
// If the width and height of the iframe are set
// as attributes (<iframe width='890' height='1900'>),
// you can have the js calculate it for you.
// aspect= $('iframe').attr('width') / $('iframe').attr('height');
aspect= 0.47;
$('iframe').css('width', '100%');
$('iframe').css('height', $('iframe').width() / aspect);
}
$(document).ready(function()
{
size_iFrame();
$(window).resize(function()
{
size_iFrame();
});
}
</script>
This will fit the iframe to the width of its container and give it the same aspect ratio as it initially had.
Edit: To answer your question, i'd call it from the ready callback and setup and window resize callback to call every time the screen size changes. I edited my code above to show this.
Edit2: As #mugé points out, you'll also need to remove your iframe css styling for my method to work.
In responsive design, I assign the iframe a container sized inside the CSS. For example,
CSS
.iframe_container {
display: inline;
float: left;
width: 89%; //whatever width you want
}
You will need to eliminate your .iframeb absolute, right, left positionings, because the container will take care of it all, unless you are talking about the 'List' parameters on top of the map, I would try to use #media to arrange clean lists according to screen sizes for the .iframeb class.

html div not allowed to go off page

First off, let me give you a little background. I am creating a responsive page using % for positioning my divs. It allows the user to drag and drop items wherever they please. The issue arises when the user places the object to near the edge of the page. When you resize the browser the images start to go off the page and get cut off.
#div1
{
overflow: hidden;
right: <?php variable>;
bottom: <?php variable>;
}
#div2
{
overflow: hidden;
left: <?php variable>;
top: <?php variable>;
}
What I would like to try and do is allow the percentage's to control the placement up until the edge of the page. Then I would like to hardcode the variables to something like 10px so it never goes of the page.
I thought of doing this in javascript(if statement('s)), but thought maybe there was a simpler way(css properties). Any help or suggestions would be greatly appreciated.
Thanks,
Rob
If you are going to use javascript you need to have a separate function that triggers on browser resize:
window.onresize = function(event) {
//your code here
}
or if you are using the popular jQuery
$(window).resize(function(){
//your code here
});
is the same.
If you want to hardcode it with css use a #media query:
#media(max-width:767px) { /*or whatever you want to use to trigger the css that will be used after browser size fits your problem */
.myImage {left:10px;top:10px;}
}
More info on what you can use with #media can be found here http://www.w3.org/TR/css3-mediaqueries/
If you ask me I think that you will accomplish a much more solid solution using javascript and since I suspect you are using js to drag elements around just go with it for resizing and repositioning too.

Dynamic Background Scrolling

Here's a link to what I'll be referring to.
I'm having some trouble getting the background image to work the way I'd like it to.
I want the background to auto resize based on the width of the window, which it is already doing correctly. If you make your window smaller you'll see the background shrink with it.
Here's the issue. If you make your window wide (short) then the background will resize and go too high so you can't see the top of the background anymore (since the background is bottom positioned).
I want the background to be top position when you are at the top of the page, and as you scroll down it will slowly move to be bottom positioned. Sort of like the effect of an Android phone's background when you move left and right. Of course, keep in mind that I still want the background to auto-resize when you make the window smaller.
html {
background-color: #70d4e3;
height: 100%;
}
body {
height: 100%;
}
.background {
margin-top: 45px;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: -9999;
}
.banner {
margin: 0px auto;
width: 991px;
margin-bottom: -9px;
}
.content {
background: url("http://i.imgur.com/daRJl.png") no-repeat scroll center center transparent;
height: 889px;
margin: 0 auto;
width: 869px;
}
.innerContent {
padding: 30px;
}
<img src="http://i.imgur.com/6d5Cm.jpg" alt="" class="background" />
<div class="banner">
<img src="http://i.imgur.com/JptsZ.jpg" alt="" />
</div>
<div class="content">
<div class="innerContent">
testing
</div>
</div>
Maybe some javascript or jquery would be needed to achieve this.
Well, this was fun, thanks!
I hope you don't mind me taking the liberty to use percentages to make my life a little bit easier and possibly the script slightly more robust since I can reliably use floats with percentages.
What I did is make the layout, html and css comply with the rules you need for the bg to be animated properly, they stayed largely the same from what you had.
Then it was just a question of figuring out the calculations needed with the right properties to figure out the percentage you were from the top, the *20 is actually the amount of space 'left' to fill by the background image in percentages (as the background height is 80%).
They I moved the calculations to a function so I could call that on scroll and on window resize, making sure it's initiated on any event that modifies the window somehow...
Didn't do extensive testing but it worked in Chrome and I'm tired :p
I believe this is what you are looking for:
http://jsfiddle.net/sg3s/RSqrw/15/ See edit 2
If you wanted this the other way arround just make the page background start at the top and modify that:
http://jsfiddle.net/sg3s/RSqrw/14/ See edit 2
Edit:
As a bonus, and since I had never actually written jquery script as a 'plugin', I decided to convert this into one. What I came up with should be easy to implement and use!
http://jsfiddle.net/sg3s/RSqrw/52/ See Edit 3
Functionality successfully tested in Chrome, Firefox 3.6, IE9 + compatibility mode
Edit 2:
Reading the question again checking if I did it right I noticed I didn't quite do what you want, so I updated the link in the first edit which gives you a plugin in which you can have several options for the scrolling background. It retains my 'old' interpetation while also doing what you want... Read comments in code for some extra descriptions.
Edit 3:
As I went to work today I was bothered with the fact that my plugin 'try' was a little bloated. And as you mentioned in the comment it didn't quite fit the requirements.
So I rewrote it to only do what you want and not much more, tested in Chrome Firefox, IE9 +compat etc etc.. This script is a lot cleaner.
http://jsfiddle.net/sg3s/vZxHW/
You can chose to make the background stick to the top or bottom if the height fits in the window. Nothing else, but that is already more than enough to do some pretty cool stuff :p
An exact solution: Fiddle: http://jsfiddle.net/srGHE/2/show/
View source
Thanks for the challenge. See below for the solution, which is complying with all requirements, including recommended yet optional (with steps on how to remove these) features. I only show the changed parts of your page, with an explanation after each section (CSS, HTML and JavaScript):
CSS (changes):
html,body{
margin: 0;
height: 100%;
padding: 0;
}
body{
background-color: #70d4e3;
}
#background { /*Previously: .background*/
/*Removed: margin-top: 45px;
No other changes*/
}
#banner /*Previously: .banner; no other changes */
#content /*Previously: .content; no other changes */
#innerContent /*Previously: .innerContent; no other changes */
Explanation of CSS revisions:
margin-top:45px at the background is unnecessary, since you're absolutely positioning the element.
All of the elements which are unlikely to appear more than once should be selected via the id (#) selector. This selector is more specific than the class selector.
HTML (changes):
All of the class attributes have been replaced by id. No other changes have been made. Don't forget to include the JQuery framework, because I've implemented your wishes using JQuery.
JavaScript (new):
Note: I have added a feature which you didn't request, but seems logical. The code will automatically reserve sufficient margin at the left side of the window in order to always display the background. Remove anything between the marked comments if you don't want this feature.
$(document).ready(function(){
//"Static" variables
var background = $("#background");
var marginTop = parseFloat(background.css("margin-top")) || 0;
var bannerWidth = $("#banner").width(); /*Part of auto left-margin */
var extraContWidth = (bannerWidth - $("#content").width())/2; /*Same as above*/
function fixBG(){
var bodyWidth = $("body").width();
var body_bg_width_ratio = bodyWidth/1920;
var bgHeight = body_bg_width_ratio * 926; //Calcs the visible height of BG
var height = $(document).height();
var docHeight = $(window).height();
var difHeight = bgHeight - docHeight;
var scrollDif = $(document).scrollTop() / (height - docHeight) || 0;
/*Start of automatic left-margin*/
var arrowWidth = body_bg_width_ratio * 115; //Arrow width
if(bodyWidth - bannerWidth > arrowWidth*2){
$("body > div").css("margin-left", "auto");
} else {
$("body > #banner").css("margin-left", arrowWidth+"px");
$("body > #content").css("margin-left", (arrowWidth+extraContWidth)+"px");
}
/*End of automatic left-margin*/
if(difHeight > 0){
background.css({top:(-scrollDif*difHeight-marginTop)+"px", bottom:""});
} else {
background.css({top:"", bottom:"0"});
}
}
$(window).resize(fixBG);
$(window).scroll(fixBG);
fixBG();
});
Explanation of the JavaScript code
The size of the background is determined by calculating the ratio of the background and document width. The width property is used, because it's the most reliable method for the calculation.
Then, the height of the viewport, document body and background is calculated. If applicable, the scrolling offset is also calculated, to prepare the movement of the background, if necessary.
Optionally, the code determines whether it's necessary to adjust the left margin (to keep the background visible at a narrow window).
Finally, if the background arrow has a greater height than the document's body, the background is moved accordingly, taking the scrolling position into account. The arrow starts at the top of the document, and will move up as the user scrolls (so that the bottom side of the arrow will be the bottom of the page when the user has fully scrolled down). If it's unnecessary to move the background, because it already suits well, the background will be positioned at the bottom of the page.
When the page has finished loading, this functionality is added to the Resize and scroll events, so that the background is always at the right location.
If you've got any other questions, feel free to ask them.
well, I'm not sure if I understand you and why do you want to do that, but you can try adding 2 backgrounds (see http://www.css3.info/preview/multiple-backgrounds/ ), one with the top bg and another with the bottom bg but I think that if the page is not too long it will cause issues, so the other answer with pure CSS is as follows: first add 3 horizontal divs with 100% width. Top div will have your top bg and its height, middle div will be transparent and auto height and bottom div will have your bottom bg and its height. All divs will have a 0 z-index. Then create a higher z-index div to act as a container and you'll be set. If I understand your question right, that's the close I can think of to achieve that. This being said, I'm pretty sure you can do this with JQuery with way better results
Using jQuery I was able to give you what I think you're asking for:
$(window).scroll(function() {
var h = Math.max($(document).height(), $(window).height());
var bottom = h - $(".background").height() - $(window).height();
$(".background").css("top", (($(window).scrollTop() / h) * bottom) + "px");
});
EDIT: Forgot to account for the way scrollTop reports position.
Or maybe:
.background {
margin-top: 45px;
max-width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: -9999;
max-height: 100%;
}
I reccomend using jQuery Background Parallax
http://www.stevefenton.co.uk/Content/Jquery-Background-Parallax/
The function is as simple as
$("body").backgroundparallax();
Ask if you don't get it to work.
#abney; as i understand your question may that's you want http://jsfiddle.net/sandeep/RSqrw/60/
you need only css for this:
#background {
position: fixed;
width: 100%;
height:100%;
top: 0;
left:0;
z-index: -1;
}
The solution to your issue is a nice little lightweight plugin by Scott Robin. You can get more info, download it, and make your life easier for all of your projects by visiting his project page here.

Javascript Drop Down Menu over Image Rotator

Designer here, trying to code.
I am almost there! Trying to get a drop down menu from dynamic drive to work over an jQuery image rotator. Played with z-index. I can get the menu to work over the image rotation on all browsers except in IE compatibility mode, cannot click on the buttons in the rotator.
http://local495.bigrigmedia.com/
Any help would be greatly appreciated!
Always so much easier to get everything looking right in Photoshop eh? You can fix your overlap issue with 2 minor tweaks to the CSS:
styles.css
#top {
position: relative;
z-index: 2;
height: 155px;
}
ddsmoothmenu.css
.ddsmoothmenu{
position: relative;
z-index: 2;
/* remaining css */
}
homerotation.css
div#feature_list {
position: relative;
z-index: 1;
/* remaining css */
}
I also noticed you had a lot of z-index: -100 sprinkled around your CSS. Those are also going to cause you trouble. I would suggest taking them all out and just using the above 2 changes.
What the above 2 rules do is establish the stacking order for the menu and image rotator in a way that all browsers (including our friend IE) understands.
The trick with IE when using z-index is to make sure all the elements you're trying to overlap are in the same stacking context. IE creates a new stacking context whenever you use relative, absolute or fixed position on an element. In our case above, we're setting the stacking order on the top most elements in the stacking context (i.e. the document), therefore it will be respected.
Edit
Added a z-index to the #top container as this is actually the <div> that's at the same level in the document as <div id="feature_list">.

Categories

Resources