I have Google Translate on my page. It looks like a drop-down list, but all other drop-down lists on my page have another style. So I created jQuery function which change Google Translator drop down list styles. This function adds or deletes some style parameters. I'd like to know when I should call this function? In current code I call it after 3 sec. after document.ready
$(document).ready(function () {
setTimeout(wrapGoogleTranslate, 3000);
});
Current situation is that I hide the Div where Google translate is placed and show it after it's styles are corrected by my function. It means that my page loads, then it wait for 3 seconds, and then Google Translate appears with corrected styles.
I'd like to know how I can determine that Google Translate drop-down was loaded and then call my function to change the style. I don't want to make users wait for 3 seconds (maybe in some situations Google Translate would loads more than 3 seconds, then my function would never be executed).
I recently wanted to change "Select Language" to simply "Language", so I also had to run code after Google's code had been executed. Here's how I did it:
HTML
It's important to set Google's div to display:none -- we'll fade it in with JavaScript so that the user doesn't see the text switching from "Select Language" to "Language".
<div id="google_translate_element" style="display:none;"></div>
<script type="text/javascript">function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-35158556-1'}, 'google_translate_element');}</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
JavaScript
function changeLanguageText() {
if ($('.goog-te-menu-value span:first-child').text() == "Select Language") {
$('.goog-te-menu-value span:first-child').html('Language');
$('#google_translate_element').fadeIn('slow');
} else {
setTimeout(changeLanguageText, 50);
}
}
changeLanguageText();
I had a similar situation where i had to change "Select Language" to just display "Language". Here is my CSS solution:
div#google_translate_element{
display: inline-block;
vertical-align: top!important;
}
div#google_translate_element *{
margin: 0px;
padding: 0px;
border: none!important;
display: inline-block;
vertical-align: top!important;
}
div#google_translate_element .goog-te-gadget-icon{
display: none;
}
div#google_translate_element .goog-te-menu-value{
color: #899290;
}
div#google_translate_element .goog-te-menu-value:hover{
color: #a6747e;
}
div#google_translate_element .goog-te-menu-value *{
display: none;
}
div#google_translate_element .goog-te-menu-value span:nth-child(3){
display: inline-block;
vertical-align: top!important;
}
div#google_translate_element .goog-te-menu-value span:nth-child(3)::after{
content: "Language"!important;
}
You can do it with pure JavaScript. It says in the W3 docs for the onLoad attribute that you can add an attribute in a HTML element which takes as a parameter, the JavaScript code to be executed when the element has loaded.
Problem is, the attribute is only supported for a few elements which are:-
<body>
<frame>
<frameset>
<iframe>
<img>
<input type="image">
<link>
<script>
<style>
So, I'd recommend going with an <iframe> or <frame. It should now look something like this:
<frame onLoad="wrapGoogleTranslate();" />
Or else, you can try this with jQuery:
$("div#googleTranslateWrapper").load(function() {
setTimeout(wrapGoogleTranslate, 3000);
});
Here's the documentation for jQuery's load method
Related
I want to have two different links and when hovering over one it changes the entire PAGE background to a different background-image-url. Then when I hover over the second link it changes the background-image-url to another picture. Is this possible? I am using Angular, I was thinking at first I could do this in css but I now think something more will be required. Any guidance would be greatly appreciated.
It won't be possible with pure CSS because selectors are unable to ascend.
What you're trying to achieve can be easily done though. Just attach hover events to the links and in the event handlers, add a certain CSS class to the page. And then define the styles for that class of course.
To add the class, what you need to do is set a state value to a certain value and in the page element, add *ngClass="{bgLink1: hovered === 'link1'}" or something like that. You get the idea.
<!DOCTYPE html>
<html>
<body>
</body>
<style>
body {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
#link1 {
margin: 5vw;
}
#link2 {
margin: 5vw;
}
#link1:hover body {
background: url('');/*any url you want for the picture*/
}
#link2:hover body {
background: url('');/*another url you want for the other picture*/
}
</style>
</html>
I really hope I could help you, if not it wouldn't hurt to write the question another time but with code or something so I can understand what you want
I have the following defined in an inline css style:
tr.submission { display: none; }
tr.submission.can_submit { display: table-row; }
tr.submission.graded { display: table-row; }
tr.submission.comments { display: table-row; }
A script generates the HTML file with the inline and tags certain rows with the table-row visibility to show them. I would like to include a link on my page so that clicking it would toggle the tr.submission display on and off again at will, much like I can do with browser dev tools.
I'm not a JS guy, so looking for the most straight forward method that isn't going to require me reworking the above formats considerably.
You should consider using a JavaScript and use JQuery for easier call
Import the JQuery with CDN into your code like this below your body tag
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
Copy this code below the JQuery
<script> $('.button').on('click', function () { $("tr.submission").toggle() }); </script>
The .button reference to your link that clicking it would toggle the tr.submission display. It is like CSS so call it with #button if your link has an id="button"
I asked this question earlier from my phone but it became very convoluted and confusing so I decided to start over after finding a usable PC. Note that I can't give the full original code nor images due to the project's classified nature which is also located offline. The bare-bones version below contains the same problem anyway, so I'm quite certain being able to solve the problem in this example code will be adequate for me to troubleshoot anything else in the actual application.
I have the following code: https://jsfiddle.net/mssdjrzk/
<!DOCTYPE html>
<html>
<style>
button {
width: 24px;
height: 24px;
padding: 4px 0 0;
}
img {
width: 16px;
height: 16px;
}
</style>
<body>
<button type="button">
<img src="https://cdn1.iconfinder.com/data/icons/famfamfam_mini_icons/action_refresh_blue.gif">
</button>
<hr>
<a>Sample link</a>
</body>
</html>
When the cursor hovers over the button, a default browser-based behaviour is triggered. In the case of IE 11, the button is highlighted.
Next, I add additional CSS for a:hover: https://jsfiddle.net/yLrznyss/
<!DOCTYPE html>
<html>
<style>
button {
width: 24px;
height: 24px;
padding: 4px 0 0;
}
img {
width: 16px;
height: 16px;
}
a:hover {
color: red;
}
</style>
<body>
<button type="button">
<img src="https://cdn1.iconfinder.com/data/icons/famfamfam_mini_icons/action_refresh_blue.gif">
</button>
<hr>
<a>Sample link</a>
</body>
</html>
Now, when I hover my cursor over the button, the behaviour is messed up - the behaviour does not render, although other events like onclick renders normally. I have done a lot of troubleshooting and attempts to workaround without success, but here are my findings:
The offending element is :hover. It doesn't matter what element/class/id is attached to it, its very existence in the stylesheet is enough. Even a:hover {} which contains no styling will cause the problem too, as does span:hover {} when no <span> elements even exist in the HTML.
I tried it on Chrome, but the problem does not exist since Chrome's default hover behaviour for buttons is rendered differently. This is thus a browser-specific problem.
The problem only exists for buttons containing images, as opposed to buttons containing text, empty buttons or standalone images not inside anything.
My guess is that the existence of the :hover CSS in the stylesheet, even if it's empty, is causing issues in how IE renders the resultant web page and its behaviour.
How can I prevent the button and/or its internal image from being affected, thus returning to the default IE button hover behaviour? I can change anything, as long as the desired hover style on the hyperlinks is achieved without affecting the buttons.
The full application which uses this code will use IE11 on Windows 10 - not any other browser. Solutions using HTML, CSS or JavaScript are acceptable but no external libraries are available to my project.
Maybe I'm missing something, but I don't see any anchor links inside the button. I used this code:
button:hover {
background: red;
}
And was able to get the hover effect you are looking for
I have found a successful workaround. Since I can't use the :hover selector, I have to mimic it via JavaScript. Credits to Javascript onHover event for the solution.
<!DOCTYPE html>
<html>
<style>
button {
width: 24px;
height: 24px;
padding: 4px 0 0;
}
img {
width: 16px;
height: 16px;
}
.isHovered {
color: red;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var links = document.getElementsByTagName("A");
for (var i = 0; i < links.length; ++i) {
(function() {
var link = links[i];
var hoverTimer;
link.addEventListener("mouseover", function() {
hoverTimer = setTimeout(function() {
link.className = "isHovered";
}, 0);
});
link.addEventListener("mouseout", function() {
clearTimeout(hoverTimer);
link.className = "";
});
}());
}
});
</script>
<body>
<button type="button">
<img src="https://cdn1.iconfinder.com/data/icons/famfamfam_mini_icons/action_refresh_blue.gif">
</button>
<hr>
<a>Sample link</a>
</body>
</html>
I would welcome any better answer though, or at least an explanation of why I have this problem - if you are able to replicate it on your machine.
It's possible to disable an entire page html if the js is disabled on the browser of the user?
EDIT:
Thank you all for the answers and comments! However, what I mean is: I want that the page is replaced with something else, like an image, in that case.
The noscript tag defines an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support script.
You can do something like this in your html body to display whatever image you want to show:
<noscript>
<style type="text/css">
.wrapper {display:none;}
</style>
<div>
<img src="src/to/your/image.png" alt="You don't have javascript enabled">
</div>
</noscript>
The css inside the noscript tag will hide the html content inside the wrapper class.
Not that I am aware of. Somewhere somehow you need to tell the browser to prevent the action/event linked to it, eg returning false, which is a task for javascript. I can come up with two alternatives:
Make all anchors dummies and correct them when JS is turned on:
foo
$('a').each(function(){ this.href = $(this).data("href");} // * jQuery for simplicity
Put an layer on top of the anchor, which you can remove with JS.
.BlockedAnchor a{ position: relative; }
.BlockedAnchor a:before{
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
$('body'removeClass("BlockedAnchor");
I want to embed zumi.pl map on my website. Their map is loaded via js to div with specific id and is dependent on external css. However my css for formating div inside div#content interferes with embedded map screwing it all up. I tried to enclose it in another div with contextual css reset but it's still displays wrong. Only way to make it display (almost) properly is to uncheck all my css rules for that div in firefox inspector but I can't figure it out how to achieve the same effect on page.
for clarity this is sample copy&paste code from their generator:
<div id="zumiMap" class="zumi_creator" style="width:300px; height:300px;"></div>
<script src="http://api.zumi.pl/maps/api" type="text/javascript" ></script><script type="text/javascript">(function(){var marker,map=new zumi.maps.Map("zumiMap", {"apiKey": "E48EF8E55A0B3BEAE0434628AE0A1EEA"});map.afterLoad(function() {document.getElementById("zumiMap").className += " zumi_creator";map.addMarker({lat: 52.214679,lng: 21.021101},{letter: "A", type: "main"});map.setCenter({lng: 21.021101,lat: 52.214679}, 7);});})();</script>
and here is my css that's to blame:
#content div {
display: inline;
float: left;
margin: 0px 0.833333%;
padding-left: 10px;
}
How to isolate html fragment so it behaves as there was no previous css rules present?
But without using Iframe.
Did you try this? #content #zumiMap div will have higher specificity than your #content div selector, so you can reset all the problem styles.
#content #zumiMap div {
display: block;
float: none;
margin: 0;
padding-left: 0;
}