I'm looking to lock down and iframe that I currently have.
I want it so that anyone can hover over it and the pointer finger will appear, but it just disables all abilities to click within it. I've tried using the pointer-events: none; css option but that disables everything.
I cannot seem to find anywhere online that would make this possible with an iframe, any ideas?
A straightforward solution could be to use a div as a catcher on top of you iframe which has CSS property cursor: pointer;, this will emulate the pointer effect and you will block all interactions within the iframe.
#catcher {
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1000;
}
<div id="catcher">
<iframe src="https://www.google.com" width="100%" height="100%">
</iframe>
<div>
I think this may be helpfull for you :
<div title="Your title Here" style="pointer-events: none !important; cursor: pointer;">
<iframe id="clock1" src="http://google.com" frameborder="0" width="110" height="110"
style="pointer-events: none !important; cursor: pointer;"></iframe>
</div>
Related
I'm having a problem with my coding on my website. Basically I've inserted the following html code on the page which is my section (section-743):
> <div>
> <div>
> <iframe width="315" height="200" src="//www.youtube.com/embed/ucXRLnIkTyQ" frameborder="0"
> allowfullscreen></iframe>
and then the following CSS to set the video into the static image:
div {
position: relative;
padding-top: 25px;
padding-bottom: 67.5%;
height: 0;
}
div iframe {
body.home
box-sizing: border-box;
background: url(http://www.ildottoredellepiante.it/formazione/wp-content/uploads/2017/05/laptop-png-6754.png) center center no-repeat;
background-size: contain;
padding: 1% 17.5% 19.8%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
How can I tell in CSS to show the image and video ONLY in the "section-743" of the website? Rather than like now is showing everywhere in blog post and other widget where it shouldn't show.
I've tried to add:
.section-743
and
#section-743
at the beginning of the CSS but unfortunately it didn't work. Any idea how can I fix this? Basically the laptop image should show ONLY in a parallax section of my website rather than anywhere else.
I look forward to hearing from you.
Thank you for your help in advance! It's a lot appreciated!
Take a look at this article: https://www.w3schools.com/css/css_syntax.asp
What you're looking for are ID and class selectors. These, however, are not magic, and require you to assign them to elements on your page.
I added IDs to the DIV tags from your example (and I added the closing DIV tags):
<div id="outerDiv">
<div id="innerDiv">
<iframe width="315" height="200" src="//www.youtube.com/embed/ucXRLnIkTyQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Now, you can reference the DIV tags in your CSS like this:
#outerDiv {
/* outer div style */
}
#innerDiv {
/* outer div style */
}
#innerDiv iframe {
/* iframe inside innerDiv style */
}
Notice that last one, which allows you to reference the IFRAME that is inside innerDiv.
Keep in mind that your IDs must be unique for the entire page.
I have a group of LinkedIn share buttons (supplied via LinkedIn) throughout my blog pages, that I am trying to align horizontally inline with other share buttons. I have tried most everything so far, and have decided to - ineffectively - try attribute selectors to make the buttons do what I want. Here is the button code:
<script src="//platform.linkedin.com/in.js" type="text/javascript">
<span class="IN-widget" style="line-height: 1; vertical-align: baseline; display: inline-block; text-align: center;">
And the attempted CSS:
span[class="IN-widget"] { display: inline-block; }
Can anyone tell me if I'm misstepping here? To my knowledge, every share button has this common class as part of its source code, so this should do the trick in introducing the desired styling. Any help would be much appreciated!
Edit
Second Edit: .IN-widget is dynamically generated and doesn't exist in markup. So use 'script[type^=IN]' as your selector see edited code below
Having one per page and using the id would be inefficient, so we need to use JavaScript/jQuery instead of CSS. One major limitation of CSS is it's inability to control a selected element's parent and ancestors.
Details are commented in demo
Demo
/* The selector means:
|| Find a <script> tag that has a [type] attribute
|| that's value begins ^= with the string of "IN"
*/
/* The .closest() method will find the ancestor closest
|| to the targeted selector. So here it's saying:
|| (Previous comment here)
|| Find the closest ancestor of the selected element
|| which has the classes .sqs-block, .code-block,
|| and .sqs-block-code.(grandma)
|| Use .css() method to change grandma's styles.
|| The extra style top:3px is just to push the icon down
|| down so that it is inline with FB and Twit icons.
*/
$('script[type^=IN]').closest('.sqs-block.code-block.sqs-block-code').css({
'display': 'inline-block',
'top': '3px'
});
$('.fb-share-button').closest('.sqs-block.code-block.sqs-block-code').css('display', 'inline-block');
$('.twitter-share-button').closest('.sqs-block.code-block.sqs-block-code').css('display', 'inline-block');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sqs-block code-block sqs-block-code">
<div class="sqs-block-content">
<div class="fb-share-button fb_iframe_widget"><span style="vertical-align: bottom; width: 58px; height: 20px;"><iframe width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" src="https://www.facebook.com/v2.8/plugins/share_button.php?app_id=&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2F0F7S7QWJ0Ac.js%3Fversion%3D42%23cb%3Df836e17d67a66%26domain%3Dtylercharboneauprofessional.com%26origin%3Dhttps%253A%252F%252Ftylercharboneauprofessional.com%252Ff23efc0724f4838%26relation%3Dparent.parent&container_width=39&href=https%3A%2F%2Fwww.tylercharboneauprofessional.com%2Finternational-pulse%2Fyour-guide-to-the-french-election%2F&layout=button&locale=en_US&mobile_iframe=false&sdk=joey" style="border: none; visibility: visible; width: 58px; height: 20px;" class=""></iframe></span>
</div>
</div>
</div>
<div class="sqs-block code-block sqs-block-code">
<div class="sqs-block-content">
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-share-button twitter-share-button-rendered twitter-tweet-button" style="position: static; visibility: visible; width: 60px; height: 20px;" src="https://platform.twitter.com/widgets/tweet_button.5b6375bb17bd9edb2f4e7f8f12971999.en.html#dnt=true&id=twitter-widget-0&lang=en&original_referer=https%3A%2F%2Ftylercharboneauprofessional.com%2Finternational-pulse%2Fyour-guide-to-the-french-election&size=m&text=Your%20Guide%20to%20the%20French%20Presidential%20Election%2C%20and%20Why%20it%20Matters%20%E2%80%94%20Tyler%20Charboneau&time=1495223324688&type=share&url=https%3A%2F%2Ftylercharboneauprofessional.com%2Finternational-pulse%2Fyour-guide-to-the-french-election"></iframe>
</div>
</div>
<div class="sqs-block code-block sqs-block-code">
<div class="sqs-block-content">
<span class="IN-widget" style="line-height: 1; vertical-align: baseline; display: inline-block; text-align: center;"><span style="padding: 0px !important; margin: 0px !important; text-indent: 0px !important; display: inline-block !important; vertical-align: baseline !important; font-size: 1px !important;">
<span><a href="javascript:void(0);"><span>in</span><span><span></span><span>Share</span></span>
</a>
</span>
</span>
</span>
<script type="IN/Share"></script>
</div>
</div>
Each share button has been stripped of ids and are as generic as they could be for demonstration purposes. On each page, include the jQuery inside <script> tags and place that <script> block before the closing </body> tag. Any other modification to HTML is unnecessary. A better way is to use an external script and have each page point to that .js file. To save a http request you could add that those 3 lines to an existing .js script but you'll need to be familiar with jQuery/JavaScript to do so safely.
Explination
This template (like all templates of this nature, Squarespace, Word-Press, etc.) is a cluster-fu## of HTML. If you find a particular element and you need to actually move it, or behave in layout, or adhere to a flow, you'll need to move up the DOM hierarchy until you find the ancestor that has siblings. For example:
<div class='great-great-great-aunt'>
<!--Many levels of cousins-->
<span class='fb'>Facebook I need to liked!</span>
<!--...</div>...-->
</div>
<div class='great-great-grandma'>
<div class='great-grandma'>
<div class='grandma'>
<div class='mom'>
<span class='linkedIn'>Hey I'm a corporate clone! How about you?</span>
</div>
</div>
</div>
</div>
The target element in this example is .linkedIn (Note the . preceding the className, that is the proper syntax for a class selector in CSS and jQuery.) On the surface, that is the element you see in the browser. It's "cousin" icon is .fb, meaning that as far as relations go they are not siblings as it appears so when rendered in browser. They do not share the same parents as siblings would so styles that concern position, flow, layout, etc. will not affect a cousin. Cousins are isolated from each other because they are nested within their own parent element as well as any ancestor elements. Therefore you must find the ancestor of .linkedIn that has a sibling that is the ancestor of .fb. Confused? Me too.
Solution
Here is grandma:
#block-yui_3_17_2_1_1493318168221_183886
A # means id which is by far the easiest and most accurate way of locating a specific element. The reason id is the best means of selecting an element is because an id is unique on any given document (i.e. single webpage).
This is the ruleset that should bring that linkedIn icon inline with the Twitter and Facebook icons:
#block-yui_3_17_2_1_1493318168221_183886 { display: inline-block; top:3px}
Linkedin Share Example Check this jsfiddle: https://jsfiddle.net/wrahvvr2/
JS:
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/Share" data-counter="top"></script>
CSS(this should target the share button):
span[class="IN-widget"] {
display: inline-block;
background: red;
}
BTW:
You have an open script tage:
<script src="//platform.linkedin.com/in.js" type="text/javascript">
You should close it:
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
My webapp uses a
<fb:login-button>
which is XFBML (eXtended Facebook Markup Language) and is rendered to:
<fb:login-button login_text="" class=" fb_iframe_widget" fb-xfbml-state="parsed" fb-iframe-plugin-query="app_id=[my app ID]&locale=en_US&login_text=%0A%20%20%20%20%20%20%20%20&sdk=joey&><span style="vertical-align: top; width: 0px; height: 0px;"><iframe name="f1987cba84" width="1000px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:login_button Facebook Social Plugin" src="http://www.facebook.com/plugins/login_button.php?app_id=[my app ID]&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D27%23cb%3Df15dab5c84%26domain%3Dmyapp.com%26origin%3Dhttp%253A%252F%252Fmyapp.com%252Ff1e9e1d5b8%26relation%3Dparent.parent&locale=en_US&login_text=%0A%20%20%20%20%20%20%20%20&sdk=joey&size=xlarge" style="border: none; visibility: hidden;"></iframe></span></fb:login-button>"
For some reason, the button contains a 1000 x 1000 px iframe. Of course, this doesn't actually display as 1000 x 1000 pixels on the webpage, but it's enough to confuse all browsers into temporarily displaying a scrollbar while the button is rendering, on page load.
Is there any way to stop this scrollbar flickering, aside from the hack of hiding the scrollbar in CSS using overflow:hidden and then setting document.body.style.overflow = 'visible'; in Javascript once the button is finished rendering?
If you don't need a 1000 pixel iframe, you can always just specify a different width using CSS.
http://jsfiddle.net/jjordanca/6UEHp/
HTML:
<p>Hi.</p>
<iframe width="1000px" height="300px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:login_button Facebook Social Plugin" src="http://www.microsoft.com"></iframe>
<p>Bye.</p>
CSS:
iframe {position: relative; width: 500px;}
Notice that the CSS width specification overrides the inline width specification.
Alternatively you could add the following CSS to the parent div (the one with class="fb-like"):
width: 48px; height: 20px; overflow: hidden; text-align: left
Thanks in advance for any and all help and responses. I have a fixed div which floats at the bottom of the screen and is used as ad space for a mobile version of a website. The live version can be found here: http://www.catholiccourier.com/?mobileFormat=true . For some reason, when I try to re-size the browser window, the image inside the fixed div does not seem to shrink properly. If I resize the window abruptly the image shrinks, but it wont resize the same way as the header logo for example. Also it does not seem to stay centered. I have tried margin:0 auto; and text-align:center on the outer div, but it does not seem to work. There are some script tags inside the div as well as noscript, and I am wondering if they may be the cause of the issue.
You can see all of the code in the live website, but here is a copy of some of the code.
<div id="adSpace" align="center">
<script language="javascript" src="http://www.catholiccourier.com/banman/a.aspx?ZoneID=43&Task=Get&IFR=False&Browser=NETSCAPE4&PageID=9311&SiteID=2&Random=1375796513537"></script>
<a href="http://catholiccourier.com/banman/a.aspx?Task=Click&ZoneID=43&CampaignID=265&AdvertiserID=79&BannerID=242&SiteID=2&RandomNumber=655331242&Keywords=" target="_Blank" class="ui-link">
<img src="http://catholiccourier.com/banman/ads/3/HOLY-SEP-REWORK_fix.gif" width="728" height="90" alt="Holy Sepulchre Cemetery 585-458-4110" align="Center" border="0">
</a>
<br>
<noscript>
<a href="http://www.catholiccourier.com/banman/a.aspx?ZoneID=43&Task=Click&Mode=HTML&SiteID=2&PageID=9311" target="_blank"> <img src="http://www.catholiccourier.com/banman/a.aspx?ZoneID=43&Task=Get&Mode=HTML&SiteID=2&PageID=9311" width="728" height="90" border="0" alt=""></a>
</noscript>
</div>
Please help and thank you.
you can use position:absolute for your div
.ui-mobile #adSpace {
position: absolute;
bottom: 0;
background-color: #e6e6e6;
width: 100%;
height: auto;
max-height: 90px;
z-index: 9999;
text-align: center;
}
I check out the w3school , and it shows that the ondbclick event is "Valid in all elements except base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title."...
But I really want to do something when the iframe is being dbclick, how can I do so?
W3School reference:
http://www.w3schools.com/TAGS/ref_eventattributes.asp
Observe the load-event of the iframe and once it fired you can assign the ondblclick to the document inside the iframe.
<iframe src="some.htm"
onload="this.contentWindow.document.ondblclick=function(){alert('it work\'s');}">
</iframe>
Note: this will be restricted by same-origin-policy, if the document inside the iframe is on another (sub)Domain than the parent window.
This is possible using CSS trick: put empty div on top of the iframe and catch the double click event of that div element. Here is the code required:
<div style="position: relative;">
<div style="position: absolute; left: 0px; top: 0px; width: 500px; height: 300px; z-index: 100;">
<iframe src="myotherpage.html" width="500" height="300"></iframe>
</div>
<div style="position: absolute; left: 0px; top: 0px; width: 500px; height: 300px; z-index: 999;" ondblclick="alert('frame double clicked');"></div>
</div>
The "heart" of this is setting the z-index of both, with the DIV having bigger value and of course having them both the same size.
Using jQuery it should be pretty simple (though not trivial) to make it "generic" by adding the extra div on page load and applying the required CSS on the fly.