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

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!

Related

Alternative to display:none using CSS and Javascript

I have a requirement of keeping a div hidden and make it visible when user performs an action.
But, due to dependencies on an external script, I cannot use style="display:none" for my div.
Therefore, to meet the requirement, I am thinking of using style="visibility:hidden,height:0" for my div and when user performs an action, make it visible using jquery by changing the style to "visibility:visible,height:auto" which I have tested and working fine.
Is there any issue with the approach I have used when using in computers and mobiles? Whether any browser prevent content on a div which has height 0?
I have seen some posts in this forum suggesting to use of "position:absolute" along with height changes to meet this objective. So, is it needed to change the div to absolute or my approach of changing the visibility and height is fine?
You could move your element outside the visible range by adding a CSS class:
.custom-hidden {
position: absolute;
top: -5000px; //use !important if needed
}
You solution is suitable, else you can still try
1) opacity: 0;
2) position: absolute;
left: -9000px;
3) transform: scale(0)

Change Text Align On Click

I am looking to have a button that shifts the text alignment to the left side whenever it is clicked. This is the function I currently have that doesn't seem to be working:
function myFunctionLeft() {
document.getElementById("myAnchor").style.left = "-15px";
document.getElementById("myAnchor").style.align = left;
Is there a different way I should be trying to move the text align to the left?
left, right, top, and bottom, only works if the element is position: absolute || relative. Just make #myAnchor position: relative.
See here for more info on positioning.
align is not a valid CSS property. Instead of .style.align = left;, you should be using .style.textAlign = "left";.
There are a few ways to go about something of this proportion, and the best (In my honest opinion) is to make a CSS class to manipulate values. I would go about doing this in using the class .align-left. The CSS would go something like the below:
.align-left {
text-align: left;
left: -15px;
}
And you could toggle the class via the following Javascript:
document.getElementById("myAnchor").classList.toggle("align-left");
This should do what you were attempting to achieve with the above code. I don't know if myAnchor is what you are aligning or if it is the button or what, but you should be able to use my code for whatever.
Anyways, I hope it helps, try it out and see how it goes. Try the developer tools equipped in your browser to see if there is issue in your inclusion and good luck!

Positioning the Chat bar (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

javascript popup from scratch no libraries

I am trying to implement a lightbox / modal box type of popup in javascript without using jquery, scriptaculous, prototype or any library whatsoever.
I found a very good start right here on stackoverflow:
How to code a JavaScript modal popup (to replace Ajax)?
(no point repeating the code here)
I tried to make simple changes and all worked fine, i even added HTML content and it worked, but I am stuck on adding scrollbars, I did my research and found nothing since almost every answer you get on google is based on jquery (even all the other answers to the question I mentioned above include jquery!)
Any suggestions or links would be great,
thanks
I think this article named "CSS OVERLAY TECHNIQUES" will help you.
http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/
It provides several methods of accomplishing the above task without jquery.
For example one of the techniques described via this link is:
TECHNIQUE #1: ABSOLUTELY POSITIONED ELEMENT
The first way that an overlay can be created is by absolutely
positioning an HTML element on the page. There would be an empty div
in the markup, and with CSS this div is positioned absolutely and
given a high z-index value to make sure it stays on top of all other
elements on the page, except the modal which is opened on top of this
overlay, which will get a even higher z-index than the overlay.
<html>
<body>
<div class="overlay"></div>
<!--...-->
<body>
<html>
Supposing we have already added an empty div to the markup and given
it a class .overlay, the CSS to position this overlay on the page is:
html, body{
min-height: 100%;
}
body{
position: relative;
}
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(0,0,0,0.5); /*dim the background*/
}
If you want a modal dialog for real, use window.showModalDialog:
returnVal = window.showModalDialog(uri[, arguments][, options]);
where
returnVal is a variant, indicating the returnValue property as set by the window of the document specified by uri.
uri is the URI of the document to display in the dialog box.
arguments is an optional variant that contains values that should be passed to the dialog box; these are made available in the window object's window.dialogArguments property.
options an optional string that specifies window ornamentation for the dialog box.
Note that a real modal stops javascript execution (like alert, confirm and prompt do), unlike fake modal dialogs created with libraries like jQuery.

How to set a target="_blank" in a DIV tag?

Got a page that displays some buttons (background images, etc) and they are all clickable. What I want this specific button to do is open the target page in another browser tab using *target="_blank"*. The way it is setup as the href in a div I cannot do this. Any ideas on a work around for this?
<div class="dashboard_navbutton" href="Home/RequestRedirect" style="background-image: url('#Url.Content("~/Content/images/Form_button.png")');">
<p>Insert witty text here</p>
</div>
Just make that div an a and add display:block; to the style.
EDIT: Ensure that your chosen DOCTYPE supports the use of p inside an a element. More generally, it should use the computed style for display rather than the tag name to determine if an element is inline or block in terms of having one in the other. I believe the HTML5 one is fine: <!DOCTYPE html>.
trap the onclick event for the div, call a javascript function, have the function openthe window.
html snippet
onclick="opennewwin()"
function opennewwin(){
var awindow = window.open(loc, "blank", "height=500px,width=500px");
}
I was trying to dynamically add divs that would also function as links.
This was my solution using CSS.
First the container needs relative positioning.
.container {position: relative;}
Next, the link needs to fill the container.
.container a {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
Like I said, I dynamically assembled the div, but the html would look something like this:
<div class='container'>[some other content]</div>
The container must be position relative, otherwise the position absolute link fills its first position relative ancestor (probably the whole viewport).
Of course, you can add styling to the div or the link. Note, I was using a position: sticky nav-bar, and I had to set it's z-index high in order to avoid collisions with the div buttons.
Pros: whatever styling and targeting you set for your links will apply. Good 'style': doesn't put a block element inside an inline (should avoid browser issues, though I haven't thoroughly tested it). Does not require any other languages or frameworks.
Cons: Not as simple as Niet's answer, but shouldn't be Doctype dependent.

Categories

Resources