The object is to Show-Hide text located under their respective Titles, so a User reads the title and shows or hides text belonging to that title if the User wants to read more.
I tried whatever I could find so far on here, we're talking dynamically setting text coming from a spreadsheet, can't use IDs, must work with .class, must be missing something, I have this piece of code:
... html.push('<div class="comments">' + comment + '</div></div></div>');
but when I try this Show-Hide code nothing happens, even if the error console shows nothing. Basically I want to Show-Hide the .comments class divs with a show-hide toggle link located under each of them. I say them because the .comments divs are reproduced dynamically while extracting text coming from Google spreadsheet cells/row (one .comments div per spreadsheet row). I tried .next, child and parent but they all divorced me so I dunno looks like a dynamic issue. So far I only managed to globally toggle all divs to a visible or hidden state but I need to toggle independantly individual divs.
I prefer a jQuery solution but whatever worked so far was achieved with native javascript.
Note: If a cross-browser truncate function which would append a more-less link after a number of words (var) in each .comments divs would be easier to implement then I would gladly take that option. Thx for any help, remember I am still learning lol!
I have been working on an entirely JS UI project and have brought myself to using $('', { properties }).appendTo(BaseElement) to work best for adding HTML elements because it appropriately manipulates the DOM every time.
If you are having good luck with push elsewhere, however, breakpointing on the line where you do your $('.class').hide() and see what $('.class').length is. Alternately, you can just add alert($('.class').length) to your code if you are unable to breakpoint the code. If it is 0, then your elements have not been properly added to the DOM. Changing to append will ensure they are part of the DOM and therefore targetable via JQuery.
Related
So, I'm new to TYPO3. I worked myself through some guides and documentations to be able to create custom content elements on my own.
Now, for one of my desired content elements, I need to have a set of fields I want to be able to make repeatable, since I want to leave the choice up to the editor, how many of the sets he wants to add.
I'm running on TYPO3 version 7.6
I have already seen both options in existing content elements:
Content elements that work like a wrapper where you can add additional content elements within and
Content elements where you can add fieldsets within its configuration.
I'm searching for examples or written guides to recreate this, since I can't figure it out from the source code of those examples I've seen.
Edit(27.12.16):
So after seeing a few reactions and replies, I want to further clarify what I'm looking for.
I do NOT need an assistant plugin to create new content elements, I'm already past that.
Let me draw an example, to better describe what I want to achieve.
I do already have a working Content Element.
I have defined a set of fields (for example name & phone) shown in the TYPO3 backend. Now I want to leave the choice to the editor, if he just wants one set of 'name & phone' fields, or 2, or 8.
Therefore I want to create a '+'-button or something like that, for the editor to click on to make a new input set of 'name & phone'-inputs.
There is an extension called mask, with that you can simply click together your own content element with many different kinds of relations and fields.
Then there is a second extension mask_export that exports your new content elements into an own extension.
With those you can just create a very basic content element
export it
see what code was generated
add more to your content element
export it
check the code
and so on :-)
I'd like to create a custom drag and drop template so I can increase the design possibilities without losing the functionality. I can't find anything in their documentation.
I was hoping to create something like this, not sure if I'm missing something obvious but I can't find a drag and drop that allows for the different coloured background with columns too.
I could use a block of code but I can't edit the css styles so it wouldn't be responsive for mobile and also not very friendly for those who don't know html.
Rather old question, but to who it might be helpfull:
If you code your own template and upload it to Mailchimp you lose the 'drag & drop' system/UX interface with the different blocks. You are able to create repeatable blocks but then it works with a dropdown list. This is (in my humble opinion) not that user friendly and takes a while before you fully understand how to use the dropdown. I had to explain it to a client earlier today and took a while before they understood it, so I decided to write them a manual for it.
But the design you want to create should be possible to make with a standard MC template. In the 'design' tab you will find settings to control background colors etc.
Still not possible, answer from the Mailchimp support: "At the moment, it's not currently possible to code a drag and drop template completely--one of our drag and drop template layouts will need to be selected, but you can drop in Code blocks to get a little more control over the styling of certain sections."
Though, if it's any help, it is possible to fully custom code your own template, and then add in mailchimps special Template language to the template to open up sections as editable within the campaign builder--or even duplicate certain sections of content. It's not quite the same as the drag drop templates, but adds similar functionality. More info on working with template language can be found here: https://mailchimp.com/help/getting-started-with-mailchimps-template-language/
I know this is an old question, but while searching for this myself I stumbled upon a solution posted here.
Basically it is possible to code your own drag n' drop template, but the solution has not been documented.
Find one of the Mailchimp templates (either one of the basic templates or a custom template from the 'Themes' menu.
Use 'Inspect element' and copy the source code of the iFramed html-email.
Paste in your preferred HTML-editor and modify as intended
Create your own template from the 'Paste in code' mode
If you want custom modules to be added by default, edit using the menu 'Edit design' in the bottom of the screen.
Save and exit :)
I found part of the answer on another topic: [Is it possible to code drag&drop templates for mailchimp?
If you add the following code into your main content div or td it will enable the drag and drop block editor:
mc:container="body_container" mccontainer="body_container"
example:
<div mc:container="body_container" mccontainer="body_container"></div>
This code will add a block editor region to the preheader section:
mc:container="preheader_container" mccontainer="preheader_container"
For the header:
mc:container="header_container" mccontainer="header_container"
For the footer:
mc:container="footer_container" mccontainer="footer_container"
Note: It doesn't seem to matter what you call the mc:container. Creating a new container with a different name worked. Although using just mc:container tag seems to work at first by itself, the mccontainer (no colon) tag is required for it to save properly.
You can create your own drag and drop template you need to add the following into your html coded template where you want the 'drag and drop' feature to exist.
<div id="templateBody" mc:container="container_name" mccontainer="container_name" class="tpl-container">
<div mc:block="3502204" mc:blocktype="text" mcblock="3502204" mcblocktype="text" class="tpl-block"></div>
</div>
This can be repeated in your code multiple times for multiple insertions. I could not find documentation to indicate if the container name or block number needs to be unique, I did make it unique in my template.
My registration is using Spring forms and validates the data after submit, the form:errors will be printed out if there are errors. I need to scroll the page down to the first form:error so the user hasn't to search for the error, is there a way to do that?
cheers
I haven't tried any of them, but I can think of two possible ways:
With Javascript. Spans generated by < form:errors /> have a class (I don't remember at the moment) or you can force on using cssClass attribute. Would be very easy using this jQuery plugin to scroll to the first one.
Without Javascript. This will be a lot more difficult and I'm not sure it will work:
In your controller, instead of returning a direct view you must do a redirect to something like /myForm#error.
In order to don't lose your model, you must use FlashMap attributes.
"Subclass" < form:errors /> tag. It must have the same behavior but it has to include an anchor named error on the first error of the page.
I think you can do it with anchors. -- But you need to implement it by your own.
My idea it to put anchors on all input files. And then have some java script that is able to scoll to an anchor. This java script is invoked on page load if the error object contains errors. -- This errors contains the name of the field. So if you have some schama for naming the anchors it should be possible to invoke the jump to an anchor script with the name of the field hat has an error.
I`m using asp.net mvc 2.0 and trying to create reusable web site parts, that can be added at any page dynamically.
The problem I have is how to load a partial view with all related js and data? Ive tried the following ways to do that:
Use partial view and put all the js into it. In main view use render partial. But to initialize partial view I need to add model to current action method model to be able to make RenderPartial("MyPartialView", Model.PartialViewModel).
Also I do not have a place to put additional data I need to fill my form(like drop down lists values, some predefined values etc).
Use RenderAction, but it seems it have same problems as RenderPartial, except for I do not need to add anything to any other model.
Any other oprions are greatly appreciated.
As I understand it, RenderAction performs the full pipeline on the action, then renders the result - so what is rendered is the same as what you'd see if you'd browsed to the action.
I've used RenderAction to render 'widgets' throughout a site, but in my view they should be independent of the page rendering them, otherwise they're not really widgets and should be part of the rendering page's code instead. For instance, if there's a log in form, you will always take the user to a page that can process the information, no matter what page they are currently on, so this makes for a good widget. Other ways I've used it is to show a shopping basket or advertising. Neither of which are dependent on the page being shown.
Hope this helps a little!
Zend framework adds the dojo.parser.parse(); to your script if you have widgets on the page, but not if you don't - makes sense. But I have a common js file which should set up lightbox images within all pages, and for this i need dojo.parser.parse(); to be included. I can add it to my common js file, but if I do, the parser runs twice and dojo breaks because all widgets in the page are getting added twice.
How can I set my js up to effectively look for unparsed items, or even better, would be to detect if dojo.parser.parse(); has already been run? (Unfortunately Zend doesn't assign the dojo.parser.parse(); to a variable)
Once dojo.parser.parse() has finished the parsing of widgets, all the widgets references can be found at the global object dijit.registry._hash. You can use a simple test to check whether this object is empty to determine whether dojo.parser.parse() has been called.
This approach only works when you only create widgets declaratively.