Hello,
having a description many times long and adding the most important technical characteristics for each article I wanted to create the Sticky effect on the product page. I saw that you can do it on Zurb..but unfortunately I couldn't :(
It could have been a solution indicated by you ... but I created a annoying table with the words "read more" and I don't like it very much.
I wanted to create the sticky for example to this image which is small the description is left on too quickly.
{link saved}
With the sticky that I saw that it can be done with Zurb Fondation it would be fantastic.
Hello Tobix,
See what you think of this to keep the image showing as long as possible alongside the longer description... Edit html/product.php and look for the containing div and image HTML around line 46:
<div class='small-8 medium-4 columns'><img alt='<?php print translate("Image of"); ?> <?php print htmlspecialchars($product_main["name"],ENT_QUOTES,$config_charset); ?>' src='<?php print htmlspecialchars($product_main["image_url"],ENT_QUOTES,$config_charset); ?>' /></div>...and REPLACE with:
<div class='small-8 medium-4 columns' id='pt_p_imgc'><img style='position: sticky;top: 0;' alt='<?php print translate("Image of"); ?> <?php print htmlspecialchars($product_main["name"],ENT_QUOTES,$config_charset); ?>' src='<?php print htmlspecialchars($product_main["image_url"],ENT_QUOTES,$config_charset); ?>' /></div>Then at the very end of the file, add this code:
<script>
$(document).ready(function() {
$('#pt_p_imgc').height($('.pt_p').height());
});
</script>Hope this helps!
Cheers,
David.
--
PriceTapestry.com
Last thing should not be visible on the smartphone as I eliminate?
Hi Tobix,
The JavaScript won't cause any error if the pt_p_imgc div is not displayed so should be OK on mobile, let me know if not working as expected and I'll check it out further with you...
Cheers,
David.
--
PriceTapestry.com
Unfortunately, the sticky effect becomes ugly on Smartphone.
take a smartphone look if you can:
{link saved}
Hi Tobix,
Ah I see - change the <script> section like this;
<script>
$(document).ready(function() {
if ($('.show-for-small-only').is(":hidden"))
{
$('#pt_p_imgc').height($('.pt_p').height());
}
});
</script>Cheers,
David.
--
PriceTapestry.com
Hello Tobix,
I wasn't quite sure which element you wanted to make sticky / the overall effect you were looking for - on the product page the description is currently output as a paragraph within the main product info area (opened by
<div class='row pt_p'>)<p><?php print $product_main["description"]; ?></p>Below that are the best price / review / shopping list links. As the description may be long and necessary to scroll down to view prices if it were to be made sticky that could if not very careful block access to the lower page content. If you could describe the area / how you wanted to make sticky let me know and I'll look at the options supported by Foundation 5. Alternatively there is a JavaScript "Read more..." option described in this comment which may suitable...
Cheers,
David.
--
PriceTapestry.com