Develop Reference

How to set image only to a certain parallax section in css

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.

HTML 5's <picture> lazy load (without jquery)

I've programmed a small lightbox for viewing images on my website. To keep the loading process fast I would like to "lazy load" the fullsize image. At the moment browsers always load the preview (test.jpg?size=520px) and the fullsize image (test.jpg).
Is there any simple solution to prevent browsers from loading the fullsize image until the image is clicked?
The website is only using minimal javascript - but I found no "no javascript" solution. Additionally I prefer a solution that doesn't require large html strings inside the .js file that will be added on mouse click.
Most lazy load scripts change only the attribute key inside the image tag. However, with HTML 5 this is now longer a useful approach. Maybe it is possible to change the <picture> tag (<picture> <<>> <picture-disabled>) and prefetch the full size image?
HTML:
<div class="imagecc">
<picture onclick="lightboxshow('test004.jpg')">
<source type="image/webp" srcset="test004.webp?size=520px">
<img src="test.jpg?size=520px" alt="...">
</picture>
<p class="imgcaption">...</p>
</div>
<div id="test004.jpg" class="imageccbox" onclick="lightboxclose(this)">
<div class="imageccboxpicture">
<picture>
<source type="image/webp" srcset="test004.webp">
<img src="test.jpg">
</picture>
</div>
</div>
CSS:
.imageccbox {
display: none;
position: fixed;
z-index: 9999;
top: 0; left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,1));
text-align: center;}
.imageccbox:target {
background: rgba(255,255,255,0.8);
display: block;
outline: none;}
.imageccbox:target > .imageccboxpicture {opacity: 1.0;}
.imageccboxpicture {
margin-top: 5%;
opacity: 0.4;
transition: opacity 500ms linear;
cursor: none;}
JavaScript:
function lightboxshow(object) {
var imageccbox = document.getElementById(object);
imageccbox.style.display='block';
setTimeout(function() {imageccbox.getElementsByClassName("imageccboxpicture")[0].style.opacity = 1.0;}, 25);
window.location.hash = object;}

Consider using the <template> element. It's just a part of web components.
Essentially you stuff any content in <template> that you do not want the browser to load, and then move the content when you want it to be loaded. You make that change onload, or onclick, or whatever other event you like. Either way, it's not a lot of JavaScript to do and you don't need any libraries.
Take a look at this tutorial: Quick trick: using template to delay loading of images.
Older browsers that don't support the tag just won't get the lazy load benefit, so there is a nice progressive enhancement bonus there as well.
Another reference: http://webcomponents.org/articles/introduction-to-template-element/

As Charlie said, the only way to do this is with JavaScript.
One solution is to remove the src attribute from the <img> tag and only add it when the image is clicked:
function lightboxshow(object) {
var imageccbox = document.getElementById(object);
var img = imageccbox.getElementsByTagName('img')[0];
img.setAttribute('src', 'test.jpg');
imageccbox.style.display='block';
setTimeout(function() {imageccbox.getElementsByClassName("imageccboxpicture")[0].style.opacity = 1.0;}, 25);
window.location.hash = object;
}
Edit: please see aardrian response as that template solution seems way more interesting!

Parallax Scrolling's effect staying in place instead of moving

I am attempting to add parallax scrolling to a page of mine and I am unsure of what I am doing wrong. This is how to set it up:
http://pixelcog.github.io/parallax.js/
I downloaded the library and put it in my file. I then called for it on the page, along with the jquery library. I then did this for my code:
<div class="home-img">
<img src="/images/try.jpg" alt="">
<div class="parallax-window" data-parallax="scroll" data-image-src="/images/try.jpg">
<div class="home-img-text">Quality Solutions</div>
</div>
</div>
.home-img {
/*position: absolute;
max-width: 100%;*/
margin: auto;
width: 100%;
height: auto;
vertical-align: middle;
}
.home-img img {
width: 100%;
position: absolute;
}
.parallax-window {
min-height: 400px;
background: transparent;
}
That is what the instructions are saying to my understanding. However, I tried removing my base img line <img src="/images/try.jpg" alt=""> and when I did that the img went away.
Does anyone have any idea what I am doing wrong?
This can be seen on my site, here:
Click here

You forgot to load the Parallax.js library,
change to line:
<script src="/path/to/parallax.js"></script>
to
<script src="/parallax.js-1.3.1/parallax.js"></script>
now the script will work.
But the "home-img" div will need to look like this:
<div class="home-img">
<div class="parallax-window" data-parallax="scroll" data-image-src="/images/try.jpg">
<div class="home-img-text">Quality Solutions</div>
</div>
This way you will be able to see the effect.
If you will keep the image it will be above the effect.
EDIT
I would recommend you use the browser inspect tools.
This way you can see if all of the javascript loaded currectly.
In your case the console tab in the inspect tool showed the error:
http://optimumwebdesigns.com/path/to/parallax.js Failed to load resource: the server responded with a status of 404 (Not Found)
For chrome use this tutorial:
https://developer.chrome.com/devtools
For firefox use this tutorial:
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector

Opposite of ng-cloak for loading message

I don't know if this exists in the AngularJS framework, but essentially I'm looking for the opposite of ng-cloak, which hides elements until the page is compiled. I was looking for a way to show a full screen loading message until the page is compiled. Is there something built into the language to handle this?

I have resolved this using a somewhat hacky method as follows. The following HTML is added at the end of the main page.
<div ng-show="::false" style="position: fixed; height: 100%; width: 100%; background-color: #353535; top: 0; left: 0; z-index: 10000;">
<div style="display: table; margin: 0 auto; font-size: 26px; color: #CCC;">
Loading
</div>
</div>
The message is shown across the entire browser until the page is compiled, at which point ng-show takes over and hides the loading message.
EDIT:
Angular 1.3+ lets you use the :: expression to prevent evaluating the expression in every digest cycle.
https://docs.angularjs.org/guide/expression#one-time-binding

<div ng-show>Loading Results...</div>
ng-show with no attribute specified compiles to false

You can use css to archive this behavior.
Create a class:
.splash {
display: none;
}
[ng-cloak].splash {
display: block !important;
}
And then add:
<div class="splash" ng-cloak> Loading... </div>
This will show before the Angular code loads, and will hide after the angular code completes. Don't forget to wrap your angular code with ng-cloak too.
<div ng-cloak> Your code... </div>

This helped me:
https://codepen.io/garethdweaver/pen/PqKLyB
It can be used without &:after, but the idea is well shown here, and my decision based on this was as follows:
.cloak-loader
display: none !important
[ng-cloak].cloak-loader
position: relative
display: block !important
.loader
height: 50px
display: flex
justify-content: center
align-items: center

How to let the iFrame accept ondblclick event?

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.