I am using https://www.skype.com/ru/developer/create-contactme-buttons/ functionality. I want to change ONLY image of skype button. I tried changing the css property "content", but it doesn't work for Mozilla browser. Can someone help me?
You cannot do that because Skype's script loads it as an iFrame. Below is a source code confirmation.
And you can read more about why it is like that on this post:
Override body style for content in an iframe
There are other ways to it like mentioned here:
How can I use skype-uri.js with personalized buttons?
Related
I hope someone can help me with this because I don't know any solution for this... I have a Blog with Google's Blogger plattform, so I only can write my CSS styles inline - no extra files.
My question: Blogger is using an iframe for the comment section and I want to optimize it for mobile devices. Is there ANY way to add some CSS to the iframe content only using the head of the HTML / XML page? Maybe with some Javascript?
Why don't you use <style>?
<style> /* put your code here */ </style>
You will need to put your css code in the page the iframe shows.
Due to security you cant interact with a page inside an iframe by javascript, so you have to have all the code in there. If you cant write code in it than I domt think it is possible, but if you can at least add a script in you can possibly add the element containing the stylesheet.
I've got an interesting question. I'm running Squarespace # buscadprimero.caminoglobal.org
and need to target the top-right button on the navigation (Ingresar, which means login) to bring up a Javascript form provided to me via embed code. The code itself works fine when included as a code block in the body of a page, but Squarespace only allows navigation buttons at the top to be hyperlinks. There's nowhere for me to add code to the button itself, being that it is a largely consumer platform and works great for straightforward application until you try to change the way it works.
They make an allowance for custom code via a "code injection" menu that adds whatever code you want to the HTML header of the page, so I've been trying to target this div, which does not have an id but who's class is external, with Javascript to replace its contents with an onclick listener to bring up this form. Tracking?
Here's my embed code, which like I said is fine:
<script>// <![CDATA[
!function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.host+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);
// ]]></script>
I've been trying document.getElementsByClassName("external").innerHTML; but when set to a var that returns undefined. New to Javascript but not afraid to learn. I'd like to figure out how to properly target the div, first of all, and then replace its contents (which currently is a link to my 404 page) with a Javascript function that activates on click. Thanks for the guidance!
I've tested the following on your site in Chrome, and have successfully changed the content. The page contained multiple ".collection" elements, so i select only the last one:
JavaScript / jQuery
$("#mainNavigation .collection").last().html("<a href='/newlink'>Test</a>");
Thanks to the great help of #Arg0n, I've now got a working login form that appears in the top-right-most button of my site. Using:
$(function() { $("#mainNavigation .collection").last().html("<span id='cc-login'>Ingresar</span>"); });
as the function to replace the contents of the div in question, I inserted <span id='cc-login'>Ingresar</span> as the call to the provided embed code:
<![CDATA[ !function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.host+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document); // ]]>
Turns out that a little jQuery was helpful in accessing the desired div, and setting its html contents was a bit beyond my area of expertise.
Many thanks to the StackOverflow community for helping me learn about targeting page elements with Javascript to procedurally manipulate its contents.
I am currently working on http://rightinfo.co.in
When I am trying to share this site on a FB page it is showing an image that I have not included in my site.
I have tried by adding ?v=1 to the url and url shortner services.
In facebook debugger also , the image is not showing. But in actual sharing , unknown image is showing.
Please help me to solve this
Thanks
You have issue with tags Please check this facebook debugger it explains alot Facebook debugger
It's because the og:image (see here) meta tag is set. This tag defines the image, which will be shown on facebook.
To change this image, try to edit this tag, take a look at the theme settings.
Another way is to change/delete the image itself, e.g. via FTP.
You can find it here: WEBROOT/wp-content/themes/Morpheus/img/portfolio/folio01-preview.jpg
Btw, I see you are using wordpress, I'd consider using a SEO plugin, which makes a proper use of the og-tags as explained here
I am using Google Forms, get an and then I embed into my website code,
I want to custom the form's background, make it transparent.
I am using JQuery,It can read the object create by iframe from google, but if I want to change its class 'ss-form-container's css, it failed.
Can someone show me how to apply CSS to google docs's iframe?
Here is the Link to my test website: http://dive.maxinrui.com/ The questionary is on third slide.
Thanks in advanced!
You can't. Frames are not allowed to interact with each other unless they have the same origin. Since the origin of the Google Docs frame is docs.google.com while your page's main frame is on dive.maxinrui.com, you cannot "touch" the contents of the frame, so there is no way for you to apply your CSS to it.
You can apply some styling to a Google Docs form by applying a theme to it in Docs. If you need more control than that, though, you will need to find another solution.
This would be a workaround solution (if it works).
Would it be viable to copy the form source code from the Google Docs page in the iframe, embed it into your own page, then modify the CSS?
Ok, guys, I need your help. My English is not so good, so I hope that you'll understand what I want.
I need some very simple modal dialog that will be generated only through JavaScript or Jquery. In that modal I will have some iframe. Modal and iframe in it must be generated via JavaScript or Jquery, because I need just some code in <script> and <a> link in body to call that js or jquery code and generate modal with iframe in it.
If there is need for CSS to create modal and iframe in it, CSS will be created via that code too. Client will put those <script> and <a> tags on his site and then will on click get modal with iframe. In iframe will be content of my own site. I need that for ads, like Google Ads.
P.S. I know how to create iframe through JavaScript, so basically I need that modal dialog to complete code. I can do that without modal dialog, using popups, but I need better solution.
Any suggestions? Thank you.
Use Colorbox. It will allow you to iframe content, and all you use are <a> tags. Super simple, 100% customizable. I use it for a lot of my client work. On the example page you will see an example of iFramed content. If you view the source, you will see the following usage:
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
...
<p><a class='iframe' href="http://threadless.com">Outside Webpage (Iframe)</a></p>
A <script> and <a> tag.
The css is not generated via the code, however, you could easily add a line as part of the script to do this in jQuery which gets called after the modal's load:
$('cboxOverlay').css({ background: '#fff' });
// etc ..