Develop Reference

Change Skype Button img

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?

how to trigger a method in javascript when contents of iframe changes with src of iframe remains same

I have recently started working on YUI JS and Wicket. I am facing a problem and couldn't solve it for the past few days.
Here is the problem: Am using an iframe in my wicket application. I have to resize the iframe based on its content changes using YUI. Here the problem is when the content changes, still src of the iframe remains same. I tried by adding listeners to the elements of the iframe but I was unsuccessful. Please help me out in this. Thanks in advance.

Allow click to pass through iFrame to content behind it

The closest thing I can find to what I'm trying to do on SO is this, but sounds like this is not a workable solution anymore and it is not specific to iFrames anyway:
Click through a DIV to underlying elements
Basically I have a DIV that gets added to a page that contains an iFrame. The iFrame contents can be minimized so they don't always take up all the space of the iFrame. The iFrame is transparent so that you can still see the web page behind it. I need to be able to click on the elements in the web page behind it, but have had no luck so far.
They have a roughly 400x400 iFrame but when the contents in it are minimized, you can still click on the web page behind it. I tried doing something similar but can't get it to work.
Even in the transparent regions I cannot click on the page behind it. I also tried using pointer-events:none as mentioned in other posts but this does not help. It only disables the elements in the iFrame but has no affect on being able to click through it.
Do anyone know how to achieve this? A way to have a larger iFrame, where the contents in it can be minimized and you can still click on what's behind the iFrame?
UPDATE:
It would appear that this is not possible when using frames.

Have you tried pointer-events: none?
http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/

Strategy 1: iFrame Resizer
If you're able to get scripts into both the host page and the page contained within the iFrame, you can use Bradshaw's iFrame Resizer JS.
It will dynamically resize your iFrame to fit its content. Works cross-domain.
The use cases for it include:
You are authoring both the host page, and the iFrame page.
You are authoring either the host page or the iFrame page, and are collaborating with the author of the other page.
I can't tell if your use case meets either of those criteria.
Strategy 2: Overlapping iFrames
Using JQuery, you can toggle the visibility of 2 (or n) iFrames which overlap completely or partially. You can load each iFrame with the same content, or different content. When any iFrame is invisible, you can click through it to the content behind it, whether that's another iFrame, or anything else.
In your application, you would be sizing the 2 iFrames differently: iFrame1="full size", iFrame2="minimized."
In my application (below), the 2 iFrames mostly overlap and have the same content, but I was padding them differently and shifting their position slightly, depending on whether something else on the page was present or absent. I'm also resizing both iFrames dynamically to fit their content using iFrame Resizer (above), but that might not be required for your application.
I recommend using different border colors for your iFrames (below), while you fiddle with their position and size.
I only learned JS like, 5 mins ago, so, my apologies if I've misunderstood your question.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
// This is the Bradshaw resizer script. Required iff you need dynamic resizing.
<script src="[https://MyiFramehost.com/web/embed/js/inline.js]"/></script>
<div id="padded" style="width:100%" >
<iframe id="oos_inline" style="border:solid;border-color:green;width:100%;position:relative;padding:65px 0px 0px 0px;top:-65px;"></iframe>
</div>
<div id="normal"style="width:100%;" >
<iframe id="oos_inline_padded" style="border:solid;border-color:blue;width:100%;position:relative;padding:0px 0px 0px 0px;"></iframe>
</div>
<script>
var iframe_padded = document.getElementById("oos_inline_padded");
var iframe = document.getElementById("oos_inline");
if(document.getElementById("home-page")!=null){
iframe.src = "https://the_embedded_site.com";
$(iframe).show();
$(iframe_padded).hide();
} else {
iframe_padded.src = "https://the_embedded_site.com";
$(iframe).hide();
$(iframe_padded).show();
}
// This starts dynamic resizing. Required iff you need dynamic resizing.
iFrameResize({log:true})
</script>

I think you missed:
myDiv.style.opacity = "0";
myDiv.style.filter = "alpha(opacity=0)"; /* For IE8 and earlier */
BTW, use a CSS class instead of applying CSS via JS. Let me know how it goes.

I can read iframe's object, but I can't modify it's CSS

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?

Shadowbox(Image gallery plugin) shows black window only

I'm trying to create an image gallery using Shadowbox plugin(http://www.shadowbox-js.com).
So I got a problem with creating the gallery, That problem is: whenever I click on the link(actually thumbnail) that displays the image it starts loading then no image is displayed only a black window.
The links I use:
<img src="http://localhost/myProject/thumbnails/10.jpg" class="thumbnails"/>
The script/link/init :
These imports are working, I verify it by using(in Chrome) Inspect element->Network.
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
notes:
1-I'm using Shadowbox as a jQuery plugin(NOT standalone).
2-jQuery is imported to my website using Google(NOT locally).
3-The real image size is 3000x2400.
Edit:
4- I realized that when right clicking->inspect element(in chrome) , the image is shown(but not in a proper way, only half of it is shown).
5-when setting handleOversize to drag the image is shown(Must click).
6-It is working in IE 9!.

You're saying that the image is not showing properly in the browser?
It may mean that the file is corrupted. Try re-saving it.
I've been using Shadowbox for quite long time now and similar problems were always caused by bad files or the files permissions not been set properly.

Since your providing an example that is local host, I can only offer general guidance and not tell you exactly what the problem is. A link surely would be welcomed.
First, make sure your call to jQuery is before the call to shadowbox.js file.
Other than that I'm sure you've given the webpage a valid !DOCTYPE which makes your Shadowbox markup correct so far as I can see at this point.
The problem could be with using jQuery and your Class Name of thumbnails.
If jQuery has modified the link with a particular style, Shadowbox may be subject to any changes in it's anchor tag.
Those changes then will cause the Shadowbox per link element to not see the original link since it's now a jQuery link. It will need to be re-cached by Shadowbox.
Solution: Try making the call to Shadowbox.init after any modifications to the thumbnail have been completed so Shadowbox caches the link once, or if needed use Shadowbox API .clearCache(); and .setup(); to re-cache those rel anchors.
I should also mention that you should ensure Shadowbox has the jQuery Adapter interface which is a download option or WordPress Plugin option.

I found the solution, It wasn't in the DOCTYPE or the browser or even my JS code!
The problem was in the CSS.
Setting the direction to right to left(rtl)(yes, the website is Arabic).
caused the images to be hidden, maybe, because the image went right and I cant see it.

It's an old question but no one answered correctly to this subject.
solution is here:
just replace "left" values with "right" and "right" values with "left" in shadowbox.css

Open the shadowbox.css and set direction:ltr for #sb-container