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.
Related
I'm stuck at some point. I'm trying to do a three-column page layout. The Middle section is for posts, the right section is for some other links and references and so (A bit long). Left is fixed.
My question is;
How can I stop the right div from moving when it reaches its bottom? And if the middle div's content is shorter then the right also has a scrollbar for the page for the right div. Just like Twitter does.
I tried to do some brainstorming. And thought maybe Twitter makes double divs for those sections. One is normal, the other is the fixed bottom it. So normal one stretches the page for scrolling, and the other one sticks on top of it. But I'm not sure if I'm right.
Or is it possible with pure CSS? (Also I'm using TailwindCSS)
Anyway; here is a presentation of my thought. (Or you can simply look at twitter homepage feed)
Also here is a gif;
click
You can use the following CSS code in the element which needs to stop
position: sticky;
bottom: 0
Refer to the following post on Stackoverflow for more information How does the "position: sticky;" property work?
Hope this answers your question!
Edit: [Try this out]
.main {
width: 100%;
height: 1000px;
display: flex;
}
.first {
width: 30%;
background-color: red;
}
.second {
width: 40%;
background-color: green;
}
.third {
width: 30%;
background-color: blue;
height: 500px;
position: sticky;
top: 0px;
}
p {
margin-left: 20px;
}
<div class="main">
<div class="first">
<p>
Left content.
</p>
</div>
<div class="second">
<p>
Main content.
</p>
</div>
<div class="third">
<p>
Right content.
</p>
</div>
</div>
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>
On my website i have a gray test image and i need to position it next to my image slider. I have tried putting them in the same div but it hasnt worked out as well as i though it would. Could someone show me how to do this within my code. I am new so i am confused with this more than others would be.
Thanks!
My website: http://rootforsite.azurewebsites.net/
Press f12 for code. The image slider and the image are near the bottom.
You can change the div css to include (in this case it should be the div with the id "containers" I think)
display: inline-block;
or since you're using lovely bootstrap you can add classes to both the divs to keep them lovely and gridified! :)
E.g.
<div id="container" class="col-xs-6">...</div>
<div id="containers" class="col-xs-6">...</div>
HTML
<div id="container">
<div class="inner"></div>
<div class="inner"></div>
</div>
CSS
#container
{
width: 300px;
height: 300px;
background-color: yellow;
}
.inner
{
width: 100px;
height: 100px
float: left;
background-color: blue;
}
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.