Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Code works on individual page but not within index page


taylorroy

Question

Site URL: https://tjr-new-site.squarespace.com/

hey hey! I'm using a code block (with HTML + JS, then CSS) to create a draggable block section. Under 'About.' (Brine/Rally 7.0)

These images under 'About' can be moved around the page with cursor by a visitor. I used CSS to set the starting location of each individual image. When you view the section of the index page as its own page, it works as it should. When the section is viewed within its index page home, the images cannot be moved to the left on the x-axis.

pw: troysitehelp

Any ideas on why it works in one place and not the other, and how to address? Thx.

Link to comment
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

3 answers to this question

Recommended Posts

  • 1

you're specifying "#about" for your containment option, which means "find me the element with the id 'about' in the document". this element doesn't exist in the page that you think is working, but does in the page that you say does not work.

This means that in the "working" page, because it can't find the about element, it defaults to having no containment set. In the non-working one, you're containing it to the about id, which is the section of the index page. there's an issue here though with the way that squarespace or the template positions that element, which means that the draggable code doesn't work as you might expect.

to fix it, I would just remove the containment option. that way you'll get consistent behaviour between both.  that behaviour will actually be limited to the code block though because I think squarespace will hide the overflowing space. 

https://api.jqueryui.com/draggable/#option-containment

 

 

Edited by iamdavehart
clarified default options in line with jquery documentation

Dave Hart. Software/Technology Consultant living in London

Link to comment
  • 1

I would add that it's probably not quite right to set the position of the image inside the draggable div using CSS. this is because it then positions the image outside of the draggable div. It does work in this case, but it does some strange positioning because the draggable library is changing the position of the containing div NOT the contained image. 

this effect is actually what's causing the odd behaviour in your "non-working" example:

  • jquery contains the draggable div to the "#about" section
  • buy you have moved the image say 300px to the right of the draggable div
  • so when you're moving the image around, it's the div that's contained (which is now 300px out). the div is stopping at left:0 which is where they all begin until you move the images with css

If you reposition the draggable div using css, rather than the image, you'd get more consistent result.

ie. dont use [alt="scooter-helmet"] use .draggable:nth-child(2) to pick the second div. change n for each one based on the order in which you write them out in the div. then set their position using top and right (as this is what the draggable library will use.

Dave Hart. Software/Technology Consultant living in London

Link to comment
  • 0
5 hours ago, iamdavehart said:

I would add that it's probably not quite right to set the position of the image inside the draggable div using CSS. this is because it then positions the image outside of the draggable div. It does work in this case, but it does some strange positioning because the draggable library is changing the position of the containing div NOT the contained image. 

this effect is actually what's causing the odd behaviour in your "non-working" example:

  • jquery contains the draggable div to the "#about" section
  • buy you have moved the image say 300px to the right of the draggable div
  • so when you're moving the image around, it's the div that's contained (which is now 300px out). the div is stopping at left:0 which is where they all begin until you move the images with css

If you reposition the draggable div using css, rather than the image, you'd get more consistent result.

ie. dont use [alt="scooter-helmet"] use .draggable:nth-child(2) to pick the second div. change n for each one based on the order in which you write them out in the div. then set their position using top and right (as this is what the draggable library will use.

Dave—Thanks for your generosity of time + knowledge to help me make sense of this.

It was all a bit of a reach for my coding knowledge, but I learned quite a bit from your explanation! Thanks so much. I'll take a pass later, removing the containment and change how I'm targeting each image.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...