Why does Khan Academy use templates with just empty space? - javascript

In Khan Academy's Perseus repo they use {' '} instead of raw .
What is this purpose of this?

In JSX, unlike HTML, newlines do not count as whitespace. For example, in HTML, to show some images next to each other without whitespace between them while putting them on separate lines in HTML, you'd have to do something like
<p><!--
--><img src="." alt="" /><!--
--><img src="." alt="" /><!--
--><img src="." alt="" /><!--
--><img src="." alt="" /><!--
--></p>
In React, the same layout could be accomplished with
<p>
<img src="." alt="" />
<img src="." alt="" />
<img src="." alt="" />
<img src="." alt="" />
</p>
That means that if you do want spaces between them, you have to declare them yourself; if you want a non-breaking space, you can use &nbsp, but if you want a regular, breaking space, you can specify it in JavaScript using {' '}:
<p>
<img src="." alt="" />{' '}
<img src="." alt="" />{' '}
<img src="." alt="" />{' '}
<img src="." alt="" />
</p>
Because newlines don't count as whitespace, you could also write that as
<p>
<img src="." alt="" />
{' '}
<img src="." alt="" />
{' '}
<img src="." alt="" />
{' '}
<img src="." alt="" />
</p>
Of course, you could also use CSS to apply spacing to the images, but it's currently much harder to remove spacing via just CSS.

Related

amp-carousel has nested a tag in not matching documentation causing SEO issues

This side-effect is undesirable as affecting SEO.
Current outputted markup for amp-carousel is:
<amp-carousel width="620" height="404" type="slides" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
<i-amphtml-sizer style="display:block;padding-top:65.1613%;"></i-amphtml-sizer>
<figure class="slide">
<a href="https://website.com/image">
<amp-img width="620" height="413" src="https://ebsite.com/image/wp-content/uploads/sites/12/2020/07/Gjen-Betty-Peppino-Lapadula-60th-wedding_35921230-846x564.jpg" class="attachment-large size-large amp-wp-enforced-sizes i-amphtml-layout-fill i-amphtml-layout-size-defined" alt="" aria-describedby="gallery-2-1461806" layout="fill" object-fit="cover" disable-inline-width="" i-amphtml-layout="fill">
<noscript><img width="620" height="413" src="https://website.com/image/wp-content/uploads/sites/12/2020/07/Gjen-Betty-Peppino-Lapadula-60th-wedding_35921230-846x564.jpg" class="attachment-large size-large" alt="" loading="lazy" aria-describedby="gallery-2-1461806" sizes="(max-width: 620px) 100vw, 620px"></noscript>
</amp-img>
</a>
<figcaption class="amp-wp-gallery-caption">
Betty and Peppino Lapadula.
</figcaption>
</figure>
<figure class="slide">
<a href="https://website.com/image/">
<amp-img width="620" height="404" src="https://website.com/image/wp-content/uploads/sites/12/2020/07/Gjen-Betty-Peppino-Lapadula-60th-wedding_35921221-866x564.jpg" class="attachment-large size-large amp-wp-enforced-sizes i-amphtml-layout-fill i-amphtml-layout-size-defined" alt="" aria-describedby="gallery-2-1461815" layout="fill" object-fit="cover" disable-inline-width="" i-amphtml-layout="fill">
<noscript><img width="620" height="404" src="https://website.com/image/wp-content/uploads/sites/12/2020/07/Gjen-Betty-Peppino-Lapadula-60th-wedding_35921221-866x564.jpg" class="attachment-large size-large" alt="" loading="lazy" aria-describedby="gallery-2-1461815" </noscript>
</amp-img>
</a>
<figcaption class="amp-wp-gallery-caption">
Betty and Peppino Lapadula.
</figcaption>
</figure>
</amp-carousel>
Whereas the documentation both v0.1 and v0.2 doesn't have this nested <a> tag.
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
I've created a custom template in an attempt to load the v0.2 script in the <Head> to "override" this possible v0.1/v0.0(?) <amp-carousel> however this hasn't worked.
The content for the AMP template is being pulled from this:
<div class="amp-wp-article-content">
<?php $content = $this->get( 'post_amp_content' );
echo $content;
?>
</div>
So in addition to asking for advice on how to strip the <a> tags out of the carousel I am curious if there is a way to edit this $content before printing it?
I have tried to utilise <amp-script> however upon wrapping this div above it breaks the template so I'm unable to write simple js to strip the nested <a> tags.
I was originally of mind that this nested <a> was the result of the non-amp site using Lightbox however I have successfully managed to create an article which emulates the content with lightbox turned off so I am somewhat confident in ruling this out.
To summarise:
a) any help on how to edit the $content before post in an attempt to strip the nested <a> 's
b) how to address this <amp-carousel> issue when my custom template is using $content to print
c) <amp-carousel> not matching markup of documentation

How can I integrate srcset in slideshow?

My website contains a slideshow. I want to change the image, depending on the viewport size. This has been solved with following code:
<picture>
<source media="(min-width:650px)" srcset="images/slider/4.gif" >
<source media="(min-width:200px)" srcset="images/slider/4_m.gif" >
<img src="images/slider/4.gif" alt="" style="width:auto;" >
</picture>
The image works, dependently on the viewport size. My problem - I want to integrate in this code here:
<div class="slider-area">
<div class="bend niceties preview-2">
<div id="ensign-nivoslider" class="slides">
'Following line should be replaced with code above...
<img src="images/slider/4.jpg" alt="" title="#slider-direction-1" />
<img src="images/slider/5.jpg" alt="" title="#slider-direction-2" />
<img src="images/slider/6.jpg" alt="" title="#slider-direction-3" />
</div>
4th line should be replace by code above, but it doesn't work out. Can someone help?
Thanks in advance!!

jquery img max slider using html and css

I have lot of images of products, i need to show as slider using left and right arrow keys.
<div class="popular">
<h3>POPULAR FISH TANK AQUARIUM</h3>
<div>
<img src="http://s16.postimg.org/xgo1837a9/image.png" alt="" />
<img src="http://s16.postimg.org/xgo1837a9/image.png" alt="" />
<img src="http://s16.postimg.org/xgo1837a9/image.png" alt="" />
<img src="http://s16.postimg.org/xgo1837a9/image.png" alt="" />
<img src="http://s16.postimg.org/xgo1837a9/image.png" alt="" />
<img src="http://s16.postimg.org/xgo1837a9/image.png" alt="" />
<img src="http://s16.postimg.org/xgo1837a9/image.png" alt="" />
<img src="http://s16.postimg.org/xgo1837a9/image.png" alt="" />
<img src="http://s16.postimg.org/xgo1837a9/image.png" alt="" />
</div>
</div>
Initially need to show four images, and then when i click right arrow another four images need to show, like slider.
May i know how to do that, I tried from online, but it didn't help me, so i reset my code.
Here is left and right arrow button: http://s16.postimg.org/7vbt88k2p/prev_next.png
I need to show like this,
Can anyone please help me to ix this,?
Any help would be highly appreciated.
Thanks,

how to prevent image wrap in responsive mode

how to prevent image wrap in responsive mode. A simple code like below is break to new line in responsive mode.
<img src="image1.jpg" style="float:left;" />
<img src="image2.jpg" style="float:left;" />
<img src="image3.jpg" style="float:left;" />
<img src="image4.jpg" style="float:left;" />
<img src="image5.jpg" style="float:left;" />
please help
Edit:
see this jsbin: http://jsbin.com/AhIwiCA/1/edit
If you want to prevent the images from wrapping, then add a white-space: nowrap; to the parent element and remove the style="float:left; from the images.
http://jsfiddle.net/myajouri/gqxxC/
Bootstrap has a class called inline I believe which may bring the images in line with each other, failing that you may need to trawl through the css to find the relevant css class to prevent this behaviour.

Multiple Roll Over Images

Is it possible to put an image onto a webpage that changes depending where the cursor is?
Current Code:
<body onload="MM_preloadImages('Images/Home.png')">
<div class="HeaderWrapper">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','Images/Home.png',1)">
<img src="Images/NavigationBanner.png" name="Image2" width="1300" height="150" border="0" id="Image2" />
</a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','Images/Home.png',1)">
<img src="Images/NavigationBanner.png" name="Home" width="1300" height="150" border="0" id="Home" />
</a>
</div>
I was thinking it could be modified some how to use this?
<area shape="rect" coords="434,54,495,83" href="index.php" target="index.php" alt="index" />
Search how to respond to the hover event.
Search how to toggle a CSS class on an HTML element.
When the image is hovered, toggle the class of the HTML element such that a different CSS class is used. This different CSS class will have a different image.
It might be easier to use jQuery for this.

Categories