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.
Related
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.
I am working on making a Google Chrome extension. Part of this extension injects some HTML into whatever webpage it is loaded with. That HTML is displayed supposed to be displayed on top of the rest of the HTML. The problem I am having is when I load some pages I can not see the injected HTML while on other pages it does show up. I did some research and tried setting the z-index to the maximum value of 2147483647 based on this post. Even when I did that, on some of the webpages it still did not show up. I am wondering if there is a way I can get the HTML to show up. I looked at the styles on the pages and I might have missed something but I did not see any z-index styles.
The following code is:
#reading-lines-injected {
position: fixed;
z-index: 2147483647;
width: 100%;
}
#top-bar-reading-line, #bottom-bar-reading-line {
position: relative;
height: 20px;
background-color: black;
opacity: 70%;
}
#gap-reading-line {
position: relative;
height: 15px;
}
<div id="reading-lines-injected">
<div id="top-bar-reading-line"></div>
<div id="gap-reading-line"></div>
<div id="bottom-bar-reading-line"></div>
</div>
Some of the webpages that don't display the HTML: digitalocean.com, schoology.com, hashbangcode.com. It does work on [stackoverflow.com5.
Thank you for all of your answers.
Just for future reference, evolutionxbox said that when there is no position applied the element might get pushed off of the screen. To prevent that I just added top:0 to the #reading-lines-injected div.
#reading-lines-injected {
position: fixed;
z-index: 2147483647;
width: 100%;
top: 0;
}
#top-bar-reading-line, #bottom-bar-reading-line {
position: relative;
height: 20px;
background-color: black;
opacity: 70%;
}
#gap-reading-line {
position: relative;
height: 15px;
}
<div id="reading-lines-injected">
<div id="top-bar-reading-line"></div>
<div id="gap-reading-line"></div>
<div id="bottom-bar-reading-line"></div>
</div>
As the title says, I'd like to know if it's possible to enable only a specific div when body is set to touch-action: none.
My goal is to block all the browser zoom, but allow to zoom in a specific part of it (maybe an image).
Is this possible? maybe in Javascript or pure CSS?
my code is the following:
$("#no-zoom").click(function(){
if( $('body').css('touch-action') == 'none' )
$('body').css("touch-action","")
else
$('body').css("touch-action","none");
$('.zoom').css("touch-action","pan-x pinch-zoom");
});
Obviously, this part is not working: $('.zoom').css("touch-action","pan-x pinch-zoom");
Thank you!
You can use siblings: .notouch and .content.
.notouch will cover all the page and .content will contain elements that can suffer touch interactions.
<body>
<div class="notouch"></div>
<div class="content">
<div class="image"></div>
</div>
</body>
body {
position: relative;
}
.notouch {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
touch-action: none;
}
.content {
position: relative;
width: 0;
height: 0;
}
.image {
width: 200px;
height: 200px;
background: #d3d3d3;
}
Like this, you can use zoom only inside .image.
I have a webpage that's pretty intensive via HTML and CSS, which leads to some elements loading faster then others when a user visits the page. The background may take awhile to load, and so on... It gets pretty ugly seeing it all load element by element...
So I'm wondering how I can first load a different page (page1, that has simply a gif and bare minimals of html) and then page2 (page with intensive html) will appear only after the client's browser has fetched all of the pages html.
I believe this can be done with JQuery, which I know almost nothing about...
Any advice would be appreciated,
Thanks,
Use the following HTML (at the top of the body is best):
<div id="loading"></div>
And this CSS:
#loading {
background: url('spinner.gif') no-repeat center center;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 9999999;
}
And the following JavaScript (uses jQuery):
function hideLoader() {
$('#loading').hide();
}
$(window).ready(hideLoader);
// Strongly recommended: Hide loader after 20 seconds, even if the page hasn't finished loading
setTimeout(hideLoader, 20 * 1000);
You could put the styles inline on the div instead of in a stylesheet for less chance of a flash of content before the loader. Also, you could use https://www.askapache.com/online-tools/base64-image-converter/ or a similar tool to convert your GIF to a base 64 URI, and use that instead of spinner.gif.
<div id="overlay"></div>
<style>
#overlay {
position: fixed;
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.hide {
display: none;
}
</style>
<script>
$(window).load(function() {
$('#overlay').addClass('hide');
});
</script>
I have implemented in Laravel and it worked as expected,
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #ffffffcf;
}
.loader img{
position: relative;
left: 40%;
top: 40%;
}
</style>
<div class="loader" ><img src="{{asset('public/img/loader.gif')}}"></div>
<script>
window.onload = function()
{
//display loader on page load
$('.loader').fadeOut();
}
</script>
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;
}