Im stuck on something and although there is 1000 different ways to select what I need, I cant get it going.
In the HTML below, the <tr class="hide"> is hidden, and when someone clicks the link in the span, I want it to slidedown.
I've tried
$(this).parent().next().slideToggle('slow');
and a bunch of other similar things, but no love. It seems because the hidden tr element is down 2 levels I cant select it.
Mind you, there will be multiple of these on a page, it needs to be the next one in line that slides down, so I cant just $('.hide') select it.
Can someone help?
Heres my HTML
<td>
<span class="details">Details</span>
</td>
</tr>
<tr class="hide">
<td></td>
Try to
$(this).closest('tr').next().slideToggle('slow');
Assuming that the code you wrote is being triggered when a user clicks the span, then your code is not going high enough up the DOM to get to the next TR. What you need is this:
$(this).parent().parent().next().slideToggle('slow');
The first parent() gets you to the <td>, and the second one gets you to the <tr>.
Related
You can not click a button unless you edit at least one field, and button will be disabled. once you edit any field the button 'reset' will be enabled to click.
You can solve this in a number of ways.
Probably one of the more useful ways (If you are using this fact more than once), is to save the "status" of the button to a variable.
Below are two separate examples of how you could code this.
The first example will take a variable called isSelected, and assign it either a value of "block" or "none" dependent on how the selector is displaying.
The second example will look at the radio button and see whether it is present in the "On" state or not.
This first one uses the jQuery addon
<tr>
<td>storeEval</td>
<td>jQuery('div.search-date-container div.modal').css('display')</td>
<td>isSelected</td>
</tr>
<tr>
<td>gotoIf</td>
<td>storedVars['isSelected']=='block'</td>
<td>skipToDatepicker</td>
</tr>
This second one doesn't
<tr>
<td>storeElementPresent</td>
<td>id=edw_paynow</td>
<td>edwPresent</td>
</tr>
<tr>
<td>echo</td>
<td>${edwPresent}</td>
<td></td>
</tr>
<tr>
<td>gotoIf</td>
<td>${edwPresent}==false</td>
<td>skipEDW</td>
</tr>
You may need to adapt the code slightly - but I don't know what buttons you are using. If you provide a bit more info and an upvote I'm sure I could try figure it out :)
I've built a custom mailchimp template and added repeatable and hideable sections so my client can edit it more easily. I have read all the documentation, my code validates, and the email itself functions great, except for one problem. Here's the gist of my layout - and ideally how I would like it to work (all extraneous code removed - but I can supply it separately if needed).
<table mc:repeatable>
<tr>
<td><img src="" alt="article image"></td>
</tr>
<tr>
<td>
<h2 mc:edit="article_title" mc:hideable>Optional Title</h2>
<div mc:edit="article_body" mc:hideable>Optional content</div>
</td>
</tr>
<tr>
<td>
<div mc:edit="article_button" mc:hideable>Optional Styled Button</div>
</td>
</tr>
</table>
When I go into the campaign editor, I can hide sections successfully. UNTIL I duplicate the block. Once I have 2 blocks, and I hide the 1st block's h2, it hides the following div. If I hide the div, it hides the button. Note: within campaign editor it appears to hide things properly. Only when I preview the email can I see that it's hiding the wrong sections.
I have tried every variation I can think of:
Nesting tables for each piece of hideable content
Separating the edit and hideaable tags to parent/child elements
Renaming all the mc:edit attributes
Moving mc:repeatable to the tr or nested tables instead
Removing mc:hideable completely, except for the button (So they would delete copy rather than hiding the whole section.)
Item 5 above resulted in a completely different problem. When I duplicated the block and hid the button on the replicated block, it hid the button in the FIRST section. It's like the names are getting crossed somehow.
There's gotta be something I'm missing. Mailchimp's documentation seems really straightforward and I haven't been able to find anything about this specific issue.
Thanks in advance!
As a workaround instead of creating mc:hideable elements inside the mc:repeatable block I've created multiple variants using mc:variant, and each variant has different items inside it.
So in your example your varients would be:
Block
Block with title
Block with content
Block with button
Block with title and content
Block with title and button
Block with title and content and button
Block with content and button
This is not quite as neat as a solution but it does work.
See here for mc:variant syntax.
I am trying to align an image to the left, and then put text directly next to it for an email. The basic html isn't working, I am seeking help from a table guru that can show me how to simply put an image on the left and have text on the right that would work in email templates. Any help would be greatly appreciated.
Without knowing more for your design I don't know if there's a better way to do this than in tables.
But as you asked for tables:
<table>
<tr>
<td>
<img src="http://your.image.here"/>
</td>
<td>
Your text goes here
</td>
</tr>
</table>
That will give you a one row table, with two cells in the row. On the cell on the left will be an image, on the right will be the text.
My current project involves working with a document editor that, for better or worse, is implemented using mshtml and setting contentEditable to true. We're certainly considering replacing this setup with something else, but for the moment assume it is not an option.
In case it matters, we're doing this using VS 2008 (.Net 3.5) & C#:
document = (HtmlDocument)this.editorWebBrowser.Document;
body = (HtmlBody)document.body;
body.contentEditable = true;
We'd like to hide most of the structural editing behind our UI, but let the user edit the text any way they like. The problem arises when we add a div with any of several styles:
(Adding a body tag to simulate what we're doing programmatically, so you can test in IE, but remember we're working in C#/.Net/VS.)
<BODY contentEditable="true">
<DIV class="intro" style="border: 1px solid blue; width=100%;">
<P>My Intro</P>
</DIV>
<P>Other Text</P>
</BODY>
There are two things wrong with this:
The first click by the user selects the div. We'd like the click to go straight to the text, and never let the user see the resize handles.
If the user places the cursor in Other Text then tries to move to the div text using the keyboard, they're prevented. The div is treated as one character when you are outside of it moving around.
So, effectively, is there any way to make the div behave like just a background decoration, but have everything around it still be editable? This html is completely internal, so we can do anything with it we like. So the div itself doesn't matter. What matters is that we:
Contain several P or other tags
Show the user visually that all the contained P or other tags are part of one group, as styling like border & background color on the current div accomplish now.
This SO question makes me worried that what I want isn't possible with our current setup, but I ask to help anyone else who stumbles on a similar problem. I'll be adding a couple imperfect solutions we've come up with in a moment.
Possible or not, thanks for any thoughts you might have.
Partial solution: Set a containing div to contentEditable=false, then true again on an inner element, like so:
<BODY contentEditable="true">
<DIV class="intro" contentEditable="false" style="border: 1px solid blue; width=100%;">
<P contentEditable="true">My Intro</P>
</DIV>
<P>Other Text</P>
</BODY>
This possibly solves problem 1 (user selecting the div) but does nothing about problem 2.
Since the HTML is internal and doesn't need to play nice with anything else, just represent the area with a table, rather than a div:
<table class="intro">
<tbody>
<tr>
<td>
Intro
</td>
</tr>
</tbody>
</table>
This solves both problems, but significantly complicates the code for editing or parsing. We'd prefer a cleaner solution.
I am trying to get all the articles that I have included to appear on the front page. I have published all of them and also enabled the Front Page column for each of them . But the problem is that one of the articles (say 'main article') occupy the entire width and the others appear side by side. I want of all them to appear taking up the entire width.
<table>
<tr><td>Main article</td></tr>
<tr><td>Sub Article1</td>
<td>Sub Article2</td>
</tr>
<tr><td>Sub Article3</td>
<td>Sub Article4</td>
</tr>
</table>
but i need them to appear as
<table>
<tr><td>Main article</td></tr>
<tr><td>Sub Article1</td></tr>
<tr><td>Sub Article2</td></tr>
<tr><td>Sub Article3</td></tr>
<tr><td>Sub Article4</td></tr>
</table>
is this question relevant and able to be understood...
Please help me out..
You need to setup this in the Menu section. Go to Menu → [Menu where your Front Page assigned]
Than choose menu thread, that response to your Front Page and in it's setup set number of columns to 1 or 0. Thats may help.