How to toggle classes of iframe in javascript? - javascript

This is the iframe (a chatbot html page) , which I am calling in another HTML project. So, i need to toggle the classes (shown below) as an onclick event or by any other functions
chatbot html page=> there is a logo, which I placed in bottom right and when someone clicking on that logo, a form div is opening... this project I'm calling in another project inside iframe
<iframe id="overlayDiv" class="overlayDiv" src="http://127.0.0.1:5501/index.html" frameborder="0"</iframe>
classes for toggling
<style>
.overlayDiv {
border: 1px solid red;
z-index: 999;
position: fixed;
right: 0;
bottom: 0;
height: 91px;
width: 92px;
cursor: pointer;
}
.overlayDivActive {
height: 470px;
width: 390px;
position: fixed;
right: 0;
bottom: 0;
z-index: 999;
border: 1px solid red;
}
</style>
for that , below functionality is not working
$(document).ready(() => {
$('#overlayDiv').click(function (e) {
$('#overlayDiv').toggleClass('overlayDivActive')
})
})

I'm a little unsure what you're trying to achieve exactly. You can make use of
//js
document.getElementById("overlayDiv").classlist.toggle("someClass");
//jQuery
$(".overlayDiv").toggle();
if that is what you're referring to.
You may or may not find this to be useful as well: https://www.w3schools.com/tags/tag_details.asp
I hope this helps a little bit since you've given minimal examples

You can use either of these two options and it will work for you. The important thing is that you order well what you have to do.
This would be using Javascript
document.getElementById("overlayDiv").classlist.toggle('active');
This would be using jquery
$(".overlayDiv").toggle('active');
This will add the 'active' class to your tag, so now you can work on your css like this
.overlayDiv {
border: 1px solid red;
z-index: 999;
position: fixed;
right: 0;
bottom: 0;
height: 91px;
width: 92px;
cursor: pointer;
}
.overlayDiv.active {
height: 470px;
width: 390px;
position: fixed;
right: 0;
bottom: 0;
z-index: 999;
border: 1px solid red;
}
The toggle is a very powerful tool that you will use more than once in projects.
I hope this helps you.

Related

How to disable a link on a widget from another site?

How do I disable the link associated with the widget I added to my website? I don't have access to anything other than the HTML code they provided. An example would be the Trustpilot widget at the bottom of the page in the link. If you click on the widget it takes you to Trustpilot's website, but we don't want that to happen. https://goldsilver.com/
The widget is an iframe, and when an iframe is cross domain (so the iframe source file is not on your site) you can not change anyting inside of it.
You could put an overlay div over it, but that would block every click on the iframe.
By the way, you can't do this thing to widgets provided by the vendors, as its against their policies ~ Saumya Rastogi
Just for learning purposes:
#widget {
width: 450px;
height: 350px;
border: 1px solid black;
position: relative;
}
#widget > iframe {
border: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
}
#widget:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2000;
}
<div id="widget">
<iframe src="https://widget.trustpilot.com/trustboxes/539ad0ffdec7e10e686debd7/index.html?locale=en-US&templateId=539ad0ffdec7e10e686debd7&businessunitId=4bf1926500006400050c99f2&styleHeight=350px&styleWidth=100%25&theme=light&stars=4%2C5"></iframe>
</div>
You can give this css property to that particular a tag like this:
a { pointer-events: none; }
a.disabled_link {
pointer-events: none;
}
<a class="disabled_link">Any Link</a>
By the way, you can't do this thing to widgets provided by the vendors, as its against their policies.

How to add button inside textarea using Javascript?

My client wants me to create a textarea inside where there has to be a button like the below picture:
Into the above pictue please follow into the right side of the picture where you can see blue color braces which is the button.
This has to be work like this 2nd picture on-click (like drop down):
Into the 2nd pictue we can see that upon clicking on the braces button the list has opened and clicking on an option from the list is writing on the Textarea. But this whole thing should work in client side i.e. using Javascript or Jquery in which I'm quite new at. So, I could not start on this. I need your wise suggestion on the above regarding how may I achieve the following meanwhile I'm also doing my research if I get to know anything then I will update my question or answer my question for other. Thanks in advance.
To achieve this you can place both the textarea and button within the same div which has position: relative set on it. You can then make the button position: absolute and put it in the top right. Something like this:
.textarea-container {
position: relative;
}
.textarea-container textarea {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.textarea-container button {
position: absolute;
top: 0;
right: 0;
}
<div class="textarea-container">
<textarea name="foo">Some content here...</textarea>
<button>Menu</button>
</div>
I'll leave the styling for you to finalise as required.
Here's a version more or less as you asked, however, due to the fact that the container-div for the menu will have to be placed outside the textarea, there isn't really a way for it to dynamically fit to the textarea using only CSS - so for that you will have to use JavaScript.
* {
box-sizing: border-box;
}
#textareamenu_content ul,#textareamenu {
display: none;
}
#textarea_container {
position: relative;
display: inline-block;
}
#textarea_container label {
background: blue;
color: white;
padding: .2em;
position: absolute;
top: 0;
right: 0;
padding: .2em;
}
#textareamenu:checked ~ #textareamenu_content {
position: absolute;
top: 0;
right: 0;
overflow-y: scroll;
max-height: 15em;
min-height: 12em;
min-width: 10em;
border-left: 1.4em solid blue;
z-index: 99;
}
#textareamenu:checked ~ #textareamenu_content ul {
display: block;
}
textarea {
min-height: 15em;
min-width: 40em;
}
#textareamenu:checked ~ label {
position: absolute;
right: 8.6em;
top: 0;
width: 1.4em;
z-index: 100;
}
<div id="textarea_container">
<textarea name="text"></textarea>
<input type="checkbox" id="textareamenu">
<label for="textareamenu">{}</label>
<div id="textareamenu_content">
<ul>
<li>First_Name</li>
<li>Last_Name</li>
</ul>
</div>
</div>

Body Background Image Clickable

I searched for hours trying to find a solution for creating a body background image clickable.
I managed to find some similar questions/answers here on stackoverflow but I don't know how to apply them.
So far I think that the code below might help but I cannot seem to understand how to use it on my website.
$('body').click(function(e){
if (e.target === this) {
window.location = "link.html"
}
});
Can someone please explain how can I have this working on 007soccerpicks.com? I need the body background image clickable except for the <div id="container"> which is the content area of the website.
Thank you very much!
The script you have setup will click the entire document if wrapped inside the body element. One way to get around this is to use a fixed element in the background with the body logic in another wrapper.
<body>
<div class="body-clickable"></div>
<div class="main-content">
</div>
</body>
<style>
.body-clickable
{
position: fixed;
top: 0;
left: 0;
z-index: 1;
height: 100%;
width: 100%;
background-image: url('image.png');
}
.main-content {
margin: 0 auto;
width: 1000px;
top: 0;
left: 0;
position: relative;
z-index: 2;
}
</style>
<script>
$('.body-clickable').click(function(e){
if (e.target === this) {
window.location = "link.html"
}
});
</script>
You could also avoid using a script and actually just make the 'body-clickable' a link.
#box-link {
position: absolute;
top: 8px;
left: 20px;
width: 83px;
height: 83px;
background-color: transparent;
border: 1px solid yellow; }
.box1 {
position: relative;
margin: 20px 0 20px 40px;
padding: 5px 0; width: 300px;
height: 300px;
background-image: url('https://lh3.googleusercontent.com/-Y8Qx-xfqufE/VOIccUtbhpI/AAAAAAAABDI/x5lTXX_Zlrs/s2048/cool-and-stylish-girls-wallpapers-for-fb-cool-and-stylish-girls-with-guitar-6413-sadredheartlovequotesforfacebooktimelinecoverx.jpg');
background-repeat: no-repeat;
}
<body>
<div class="box1">
<a id="box-link" href="https://www.facebook.com/"></a>
<p>The background of this box is an image.</p>
</div>
</body>

JS not working after doing custom css on Wordpress Site

I am currently in the process of developing an online shop via wordpress. Everything was working fine, now I wanted to give my page a custom border( inverted round corners) and found the css code for it as seen here:
css:
body {
background-color: #fff;
}
.wrapper {
overflow:hidden;
width:200px;
height:200px;
}
div.inverted-corner {
box-sizing:border-box;
position: relative;
background-color: #3e2a4f;
height: 200px;
width: 200px;
border: solid grey 7px;
}
.top, .bottom {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
.top:before, .top:after, .bottom:before, .bottom:after{
content:" ";
position:absolute;
width: 40px;
height: 40px;
background-color: #fff;
border: solid grey 7px;
border-radius: 20px;
}
.top:before {
top:-35px;
left:-35px;
}
.top:after {
top: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
.bottom:before {
bottom:-35px;
left:-35px;
}
.bottom:after {
bottom: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
html:
<div class="wrapper">
<div class="inverted-corner">
<div class="top"> </div>
<h1>Hello</h1>
<div class="bottom"> </div>
</div>
</div>
I renamed the classes to get no conflict with the existing css classes of the theme. It is working fine as seen here:my site. The problem is now, that I cannot interact with the site anymore, no links, no hover effects. It seems like the custom css is overlaying the actual site. Do you have any suggestions what I maybe did wrong?
P.S. I edited the header.php so that inverted corner div and the top div are right underneath the page-wrapper div( site content) and in the footer.php I edited the top div and the inverted-corner div closing right above the page-wrapper div closing.
Add :
pointer-events: none;
to the .bottom-corner CSS, so the mouse passes through.
In your custom.css you have this:
.top-corner, .bottom-corner {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
This basically overlays the whole page and thus disables any interaction.
One other option I would like to suggest to change following css rule
CSS
.top-corner, .bottom-corner {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
Replace above code with the below one
.top - corner, .bottom - corner {
position: absolute;
width: 100 % ;
}
this solution will work on all modern browsers and IE8 and above ( I'm not sure about lower version of IE, but it may work on them as well )

How to create a modal popup using javascript and CSS

Actually, two questions:
How can I create a modal popup with background color of gray?
Also I need to create for a cover background color only to table itself. Not to overall page.
How do I do this using javascript and css?
Here is the HTML, which should probably be inserted with JS, and the styles should be in an external stylesheet.
<div style="background: gray; width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px" id="modal">I'm a modal</div>
Then, you could leverage jQuery to display it.
$('a.modal').bind('click', function(event) {
event.preventDefault();
$('#modal').fadeIn(800);
});
This is only a start, you'll want to learn from this and build upon it. For example, the script should check is(':hidden') and show, and if not then fadeOut(800) or similiar.
I use this for the mask that sits on top of the screen
.Mask {
display: none;
width: 100%;
height: 100%;
z-index: 9000;
padding: 0px;
margin: 0px;
background: transparent url(http://i.imgur.com/0KbiL.png);
position: fixed;
top: 0px;
overflow: hidden;
}

Categories