I'm looking to do an infinite scrolling loop custom code in Webflow project - webflow

I am trying to create this automatic, infinite scroll; example on this site (logos at the bottom of page): https://www.speedgeek.com/
I'm trying to add custom code to a Webflow project. The code I have added is in the Team page body.
You can view my read-only webflow project here to see the div and section elements:
https://preview.webflow.com/preview/apartmentlist-com-about?utm_medium=preview_link&utm_source=designer&utm_content=apartmentlist-com-about&preview=f2723eca4f11da331474a050a7cb8940&pageId=5d7f470ca3db0876bf3b861c&mode=preview
Live link here:
https://apartmentlist-com-about.webflow.io/about/team
Any help is much appreciated!
Cheers,
Bec

Related

Greyed out section in Squarespace

HELP ME please.
When I create a new section within the portfolio part of my Squarespace website, it is greyed out. See link below. I can still add content to the section. As you can see there is a 'BACK' button and variations of background with either an image or plain colour. But why is there a white/grey overlay on the section?
If I move the section up then the image gallery comes down into the second position, and has the grey overlay. So it seems it's the second section position which has the problem. If I create another section below the second one it's completely fine as well.
I hope this is an easy one to fix.
thanks! 🙂
https://www.regardsfromyourfuture.com/future-paintings/project-one-44zcm-57lgb-6glfy-p2f7c-nbdk9-76lc2-zh5z9
That is happening due to the following rule that is within your Custom CSS / CSS Editor:
.page-section:nth-child(2) {
background: #000 !important;
filter: opacity(30%);
}
That rule was likely written specifically for a different page, but was not written such that it only applies to said page. You'll want to examine your other pages to see if any page is benefiting from that rule, whereby the second section of the page has a lower opacity. If I were to guess, I'd say it's a section on a page that only has a background image with no content.
If there is no other page that benefits from the rule, you can simply delete it from your CSS.
On the other hand, if there is a page (or set of pages) that benefits from the rule, you would want to edit the rule so that it is specific to a single page (or set of pages) by adding the collection ID classes to the beginning of the rule.

How to customize the page?

I'm attempting to customize the Piranha CMS system. I'm interested in changing the layout, setting up my own styled menu and tweaking where the content on the page shows up.
Is the intent that I modify the _Layout.cshtml file to my liking?
If there's a page in the documentation that covers this, please helpfully provide the link. :)
Piranha CMS is just a framework for content management, not a website template with widgets, themes and stuff like that :) With that said, a basic Piranha CMS project is basically a standard MVC project with two included controllers, one that loads the model for a requested page, and one that loads the model for a requested post.
This means you can do anything that you can do with any normal MVC application when it comes to styling and modification.
There exists some helpers for rendering Menus, Breadcrumbs and so on. Documentation for the helpers can found here:
http://piranhacms.org/docs/api-reference/site-helper
http://piranhacms.org/docs/api-reference/ui-helper
For the helper methods that render html there are hooks for overriding all content rendered so that you can change the standard menu to your own style of html if you need. Documentation for the hooks available can be found here:
http://piranhacms.org/docs/api-reference/hooks
Regarding what can be achieved with Page types and creating templates with different regions you can check the following pages:
http://piranhacms.org/docs/pages/page-types
http://piranhacms.org/docs/pages/page-model
http://piranhacms.org/docs/pages/regions
http://piranhacms.org/docs/extend/extensions
I hope this helps you a bit.
Regards!
HÃ¥kan

How to use the Featured Item slider 2.0 in Orchard CMS

I am very new to orchard CMS... i am trying to make a site in orchard CMS as this is my first site in orchard... i am facing a fair bit of problem and hindrances to over come... my background of the CMS for creating websites is wordpress/PHP....
but now there in this project i have a problem for the slider in the home page! how could i implement a slider in the home page... after searching a bit i have found to use the featured image slider.. i have tried to implement it... i have installed the module and made the featured group... now MY PROBLEM IS WHERE I CAN ADD THE IMAGES IN THE SLIDER... AS THE FEATURE ITEM FROM THE MENU ONLY SHOW THREE FIELDS HEADLINE,SUB-HEADLINE, AND LINKURL...
kindly let me know where do i can add the images in this slider and show them on the home page of my site....
Thanks alot in advance....
After hell of the search i have got the solution for that purpose... i am elaborating my answer step wise so that the new guys like me should understand that without an inconvenience...
normally orchard CMS uses nivo slider bydefault... if you want to use other sliders follow the same path as pasted below...
1: if you have download the Orchard CMS there will be a Jquery function in the layout.cshtml and the jquery file will also be linked in the script tag, pointing to the package of Jquery in Js or anyother folder...
2: Get the name of the div for which the Jquery is pointing to... normally the name will be "slider".... Copy that name and paste it in your home from CMS... but make sure to keep the name of the div same as the Jquery function narrates which is ("slider").
3:Link your images in the Div...
and browse the site in the browser and enjoy the slider...
I have a fantastic tutorial on pepfry.com for this issue. I have a complete tutorial where I show you all the steps to successfully install the 'Featured Item Slider' with screenshots.
I also have a video on YouTube where you can see the Image slider working successfully.
Regards!
Sumesh M.S

jQuery Animation

I am trying to recreate some effects similar to the div loading effects on this site i.e. there is no visible content when you load the page but upon clicking on a navigation link, it dynamically loads the divs.
http://worldofmerix.com
It is for a film studio website and I would like it to be interactive like this site. Does anyone know how I could achieve these effects with Javascript and/or jQuery?
Thanks for all the help in advance!
Have you used jQuery before or looked at the docs? This is really quite simple using jQuery's built-in animation effects such as fadeIn. The site you've linked to doesn't dynamically load the content - it's all part of the same page and simply displayed and hidden as appropriate.
Here's a rough fiddle showing how it works. Of course, you'd need to work out the styles and quirks in animations.

Question regarding how a public SharePoint site is made

I had a look at http://www.westernaustralia.com/au/Pages/Welcome_to_Western_Australia.aspx and I know it's a SharePoint site and I am wondering how it could have been made.
I am mostly interrested in the center column (What's On). Is it an announcement list with thumbnails and Find out more links are pointing to wiki pages? Could it be a custom web part or is it possible to do this sort of thing with SharePoint 2010 out of the box?
Thanks in advance.
You can do this easily with a "What's New" web part. Customize your library view setting and set your webpart to use that view. Add a simple content editor at the bottom of this web part and add those other links like View All etc...
Remember that you can create your own list and make sure to index it so that it can rollback into the What's New webpart.
Looking at the emitted HTML it looks like a custom user control in the page layout to me (hell I could be wrong)
That said though it is possible to do this OOTB and I could build that functionality using the Content Query Web Part and some custom XSL