Jump to content

Archived

This topic is now archived and is closed to further replies.

ketri

Can I use the section ID when developing custom sections?

Recommended Posts

ketri

When users drag new section to their site the instance of the section will get a unique ID like so:

<section id="mediaboxuzxxph0" ...> 

Is it possible to use that section ID in the section php-template? I'd need to write a script that would do things only to this specific instance of the section, not all of them (so I cannot use a class) if there are several instances of this section on the same page. I hope I explained it clearly enough. 

At the moment my only solution is to create a random number variable and use  that both as a class for the section and in the script, so the script will only do it's magic for this instance of the section and not all of them.

 

Thanks!

Share this post


Link to post
Share on other sites
Danny

Hi,

 

The simplest way would be to add a unique class to the section you wish to add the script to via the Custom styling classes field. Then you can use the script targeting the class that has been applied to the section.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
ketri

Thanks Danny but that solution will not work unfortunately. I don't want users to have to insert new classes by themselves for this specific section because it will be a better user experience if it works automatically. So is there no way to use the ID of the instance of the section? 

Share this post


Link to post
Share on other sites
Danny

If you do not clone the section then the sections ID should differ from the others and therefore, you should be able to use the ID. However, if you do not want users to add a class, how are you going to predict the ID of the other sections, as these IDs a unique to that section ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
ketri

Ahh I probably couldn't explain my needs clearly. Always a difficulty with these posts =) 

So I have a div in my section that should be interacted with. Let's say that clicking this div will change it's color. So in my section template I have a class for this div and a script that makes clicking this class change its color. It works until user adds another instance of the section. So I'd want to use the script in a way that would affect only this instance of the div, only this ID use has created. 

 

So I'd like to know if in the section template there is a php thingy that would output the ID of this instance. So can I make a section that would for example echo out the ID of this section? 

 

Then I could have

<div class="box"></div>

and

$('<php some code here to get the id of this instance of the section ?> .box').click(function(){
$(this).toggleClass('clicked');
});

Share this post


Link to post
Share on other sites
Danny

Well as long as the user doesn't clone a section the ID should be unique and therefore, you can use it to target that specific section.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • sakkthi subramaniyam
      By sakkthi subramaniyam
      Working on a very old site which has  pagelines framework theme. I need section plugin. so i can install postpins section. I have lost backup copy.
      Thank you.
    • elementalkites
      By elementalkites+
      Good evening. I am attempting to use the Impulse section on a page I am working on (https://dev.elementalkites.com). The tool seems to have the ability to overlay a logo on top of the slider images but in my case it isn't working, even though I have added the logo file and given it a height to display at. I have attached a screenshot for reference. Any help would be appreciated.
       
       
    • jojoking
      By jojoking+
      I have to admit to being baffled.
      I'm trying to embed a video (from my WP media library) within a WP post using the videobox section shortcode.
      The shortcode section popup only allows two items to be configured - the section type, in this case videobox - and a unique id. There's no URL or other parameters such as autoplay or loop which are available within the Pagelines editor.
      Whatever I put in the unique ID makes no difference to what is shown which seems to be a default video with stars or white noise on a black background.
      I assume I need to define this ID somewhere else, or maybe WP has done it for me?
      HELP!
       
      PS This is the page source generated when a shortcode is added within the WP post editor
      <!-- VideoBox | Section --> <section id="videobox_1675853156" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="1675853156" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="280414138" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/plugins/pl-section-videobox/default.mp4?r=280414138" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#280414138')[0].load(); </script> </div> </div></div></section> </div>  
      If I add a videobox section using the Pagelines page editor the page source generated includes my video:
      <!-- VideoBox | Section --> <section id="videobox_udvu4uz" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="udvu4uz" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="429558737" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/uploads/2017/04/HIHWelcome.mp4?r=429558737" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#429558737')[0].load(); </script> </div> </div></div></section>  
    • flourishdesignstudio
      By flourishdesignstudio+
      Hi,
      I am having an issue with the Lax sections on Platform 5. I can embed a widget or text box into a Lax section which is really neat, but the image in the background (the parallax image) seems to get stretched and doesn't scale in an attractive way.  For example, the page http://ed6.61e.myftpupload.com/#clients has a parallax section with a woman's face  and I thought is would scale as the browser window gets smaller but the zoom-level never changes. Also, the amount of parallax shift seems more dramatic than what we want. I thought that if I uploaded a shorter image it would scan/scroll less since the height from the image's top to bottom would be less. However, that doesn't seem to have any effect and I am at a loss of how to properly control the way the image is displayed within that box. Any thoughts, tips, or suggestions to get me pointed in the right direction?
      Thanks so much for the help!
    • PierreFF
      By PierreFF+
      Hello Everyone, 
      I think this one is for the pagelines team. 
      I have some trouble with the Adventure section plugin https://www.pagelines.com/product/pl-section-adventure/ that doesn't seem to load in any of the three websites I run using pagelines. 
      I do the setup via the extend platform as usual. It tells me that the plugin is installed and activated but unfortunately it doesn't appear on the page editor.
      I have just tried it consecutively with three websites I own with the same result.
      My intention was to use it with this website: http://launchpadweekend.foundersofthefuture.co/ (free version)
      And I also tried with this website http://foundersofthefuture.co/ (pro license) and this one http://ffactor.me/ (free version). And I have the same problem with each. 
      I would love to see how I could solve this issue. 
      Thanks a lot. 
      Pierre
       
×