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.
Related
In my page i cant fix white block in bottom, in footer page.
Image
Link Page: http://rewardapp.online/index.html
<div style="position: absolute; z-index: -10000; top: 0px; left: 0px; right: 0px; height: 3994px;"></div>
Delete the above line of code above in the two locations it is written in at the footer of your HTML Document.
The DIV does not have a name, thus cannot be referred to by JavaScript
There is nothing contained inside the DIV element, so it appears to simply be acting as a spacer
the z-index indicates that its to sit at the very background of the elements on the webpage, which tells me that its set to simply be a way to define the page height given it has a height setting of 3994 pixels
It may have been placed in there whilst initially designing your page because other than stretching out the height of the page, it is literally doing nothing.
To find the above line of code
It appears (on output) to be located here (notice there are 2 lines of the same entered)
<script src="js/scripts.js"></script>
<div style="position: absolute; z-index: -10000; top: 0px; left: 0px; right: 0px; height: 3994px;"></div>
<div style="clear: both;"></div>
<div style="position: absolute; z-index: -10000; top: 0px; left: 0px; right: 0px; height: 3994px;"></div>
<div style="clear: both;"></div>
</body>
<!-- <body> -->
Your issue is caused by the last two div elements on the page. They both have incorrect stylings for the height for what you are trying to achieve. To correct the issue change the height defined within the style attribute of both of these elements to something that suits you. In this case changing them both to 3800px will solve your problem and remove the white space at the bottom of the page.
In attribute to that, neither have any way to reference them which would lead me to believe that they are in fact added to create white space.
You can either resize them or both can be removed from the DOM to remove the whitespace.
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.
How to stop the spinner when url is offline and display a warning that the offline or not found url??
CSS
#loadImg {
position: absolute;
z-index: 999;
}
#loadImg div {
display: table-cell;
background: #fff;
height: 633px;
text-align: center;
vertical-align: middle;
width: 2000px;
}
HTML
<div id="loadImg">
<div>
<img src="https://2.bp.blogspot.com/-9XwrYMe59OY/WOBFFeppEYI/AAAAAAAAB2A/CtyK_-GN8DUMzJypSJqnLKEDn4f-5_fOwCLcB/s320/balls.gif" />
</div>
</div>
<iframe width="100%" onload="document.getElementById('loadImg').style.display='none';" frameborder="0" height="1000px" class="col-sm-12" src="https://testmyweb.com/"></iframe>
A method to do this is to create a page which sends a request to the target and displays its response. If there was no response, then handle the error. Your new proxy page will be used as the target inside your iframe, but you will need to make sure you handle the relative URLs of the target page, that is, you rewrite those URLs to absolute paths. You will need to take a look at the src attribute of img and script tags and you will also need to take a look at the href of a and link tags. In case a CSS rule uses url() with a relative path, you will need to write your own CSS which overrides those rules.
An interesting problem in front of me. I have
<div class="box-content">
<p style="height: inherit; width: inherit;">
<iframe width="100%" height=" 100%" src="http://localhost/imagebase/image/data/banner/swf/Comp1.swf"></iframe>
</p>
</div>
I need to make this code mobile compatible as well. What I am seeing that if I fix the size of p then it takes same on mobile as we all know. but in case of inherit it takes the width of its parent div, which is mobile compatible.
But I am not able to get full height because it doesn't have that height. By default its 185px and I am required to have a width of 300px to show my swf file.
Is there any method that can change this box-content class height automatically in JavaScrip or jQuery as recommended by this p and iframe.
I cannot do directly change the height of this class because it is utilizing on many places.
Edit
As Brett suggested, and if you for what ever reason can't change the html, this css rule will do the trick:
.box-content p {
min-height: 300px;
}
But, below sample shows how it could/should look like.
I also moved the inline styles to css rules, which make it easier to later change the behavior, and the most appropiate tag as a container would be a div, not a p.
.swf-container {
height: 100%;
width: 100%;
min-height: 300px;
}
.swf-container iframe {
height: 100%;
width: 100%;
}
<div class="box-content">
<div class="swf-container">
<iframe src="http://localhost/imagebase/image/data/banner/swf/Comp1.swf"></iframe>
</div>
</div>
I have a website and I would like it to do this: When I click on an image on the left side of the page, the page moves backward and when I click on an image on the right side, the page moves forward. I got everything set up correctly so I tried doing this simply with css, onmouseover move the margin of the page so many pixels to the right or left:
<p onmouseover="hoverForward" style="text-indent:-1000px;">
<div id="menu" style="height: 504px; width: 92px; position: absolute; z-index: 2; top: 62px; left: 1353px;">
<img src="image.jpg">
</div></p>
But that doesn't give me any result. So I tried using an example from w3Schools for javascript onmouseclick:
function myFunction()
{
document.getElementById("demo").innerHTML="Hello World";
}
<p onmouseover="hoverForward" style="text-indent:-1000px;">
<div id="menu" style="height: 504px; width: 92px; position: absolute; z-index: 2; top: 62px; left: 1353px;">
<img src="image.jpg">
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</div></p>
I tried just putting the button on the image for the sake of testing it out. The button was there but it didn't scroll when i clicked it. What did I do wrong? It seems like the first approach I took should have definitely worked.
Thanks
Your first snippet won't work anyway, because it's not dynamic. Additionaly, text-indent isn't the best way of handling offsets for block elements. The second one can't work, because the JavaScript won't scroll, but output 'Hello, World' to the <p id="demo" ...> element.
Better have a look here:
http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/
That's a nice way of vertical scrolling with the use of HTML ankers, that will even work with browsers that don't support or allow JavaScript.
May that help you?