lullabyman

Great insight, Ben. I’ll start with that. Thanks!

Thanks for Replying Kharis. I ended up giving up on using JavaScript for this and used negative margins to position a title header. Thanks for asking though!

This is a problem on the tablet and especially the smartphone screen. Text and button are both pushed way down on the page so it covers the sections below the video. I have no idea how to fix that. Suggestions?

Okay. I’m thinking now what really did it is forcing the svg class, which I didn’t include in the above instructions.

Incidentally, at least for me, I was really confused where to select the options in the setting panel for assigning the style-svg class and forcing it, which your documentation mentions. It wasn’t until I went back to the settings after I saved the advanced mode settings that I discovered these other options, and then untoggled the Advanced option to see them disappear again after I saved the non-advanced settings.

So at least for me, would have saved headache if those other settings didn’t disappear entirely when the advanced settings wasn’t saved. If they were just grayed out when not available, or make them appear when the advanced settings checkbox is selected (ajaxian like), if that makes sense, would have saved me a lot of confusion. But then I seem to be a real good test case how idiots tend to approach things … so maybe I’m the only one that would mess up.

FYI, for others who might run into this problem, you have to do 3 things:
(1) Use inline SVG, just select this option in the settings panel
(2) Use the “style-svg” class, just select this option in the settings panel
(3) *Delete* the title that is wordpress so kindly automatically creates for you when you upload your SVG using the library. This is what I wasn’t doing. See
https://drive.google.com/file/d/0B3dbrj98d4NEem1sekp2al82bUk/view?usp=sharing
This needs to be blank.

Thanks again BenBodhi for an awesome plugin!

Okay, figured out why that didn’t work the first time I tried that. When using the library to upload the SVG wordpress automatically assigns a title to the image based on the filename. See
https://drive.google.com/file/d/0B3dbrj98d4NEem1sekp2al82bUk/view?usp=sharing

If you leave that there the svg title will conflict with any title tooltips originating from within the SVG. All I did was delete the title and it worked great. Thanks!

I still would like to show those titles in another DIV outside the SVG container, but I’ll do some more scouring to try and figure that out.

>add class=”style-svg”

D’oh … okay I’ll try that. I already did once, but I’ll try it again.

Interesting. After seeing your post I installed a fresh wordpress instance on a domain I wasn’t already using, installed SVG Support, and nothing else. Then uploaded the graphic. Here it is:
https://sproutbook.com/benefits-diagram_animated-fin/

At least for me tooltips don’t work, on any browser or machine that I try. They do however if I right-click and open image in new window (so it’s viewing the raw SVG directly).

If you save it as an SVG and drop it in a browser window, then hover over the texts “Text1” and “Text2” the tooltips will appear. They won’t if using this plugin.

>Why you’re trying to use SVG format for this…

Because it’s animated. The actual SVG I’m using is this one:
https://immersionmax.com/wp-content/uploads/2017/09/Benefits-Diagram_animated-fin.svg

Thanks!

Okey dokey. support ticket: https://www.ads-software.com/support/topic/need-tooltips-visible-from-the-svg-title-tags/

rainasariah –

Everything you need to know to do that is on this page. In Kharis’ javascript code above he is appending to the HTML with each line that starts with “heroContent += “. Just keep doing that and use the HTML it would take to do what you would normally need to do. Test out first the layout of what you want to do by just doing the needed HTML at JSFiddle. You can do what you want to do with DIVs, spans, or even tables (yes, that’s okay… just set borders=0).

When you get your layout correct at JSFiddle paste the resulting HTML code into the website javascript editor (Appearance/Custom Javascript), each line preceded by
heroContent += ‘
and ending with
‘;

• This reply was modified 7 years, 2 months ago by lullabyman.

.

• This reply was modified 7 years, 2 months ago by lullabyman.
• This reply was modified 7 years, 2 months ago by lullabyman.
• This reply was modified 7 years, 2 months ago by lullabyman.

okay, thanks!

.

An utterly fantastic plugin, Mike! Thanks! It took a while for me to get it the way I want … afterwhich I did the following quickstart guide for me … thought it might be useful for others:

1) Add and Activate the “Google Forms” plugin in WP

2) Create the form in Google docs
– When creating the form in google docs, go to the bottom of the create/edit webpage and click on the question mark, then select “use old forms”. You’ll know if you’re using an old form if at the top of the edit page it has a wide button to switch to the new form (which you should ignore).
– Don’t put anything in the “Form Description” field since it doesn’t do HTML. Instead, you can add that in your WP webpage using nicer formatting, above where you’ll put the shortcode.

3) Edit the form in Google Docs
– deselect “Require [google-user] login to view this form” at the top
– deselect “Show link to submit another response”, at the bottom
– Click “Addons” menu item, then “Email notifications for this form”
– – Just select all the defaults
– – When adding rules, leave the options blank for the first rule, then “Create rule”t. – – You will then get an error about needing to pay for premium features. Ignore it.
– Copy the url for the edit-form page for the form, which you’ll use in the next step…

4) “Add form” in the Google forms plugin in your WP site:
– In the plugin’s setup page for the form (“Google Forms” – “Add new”), where it asks for the form url don’t use google’s viewform url, but the google url for editing the form (the viewform url did not work for me)
– Make the “Confirm url” is the homepage. It’s where the browser goes after submission success.
– First Try Style: Redirect
– Type something in for the alert, like: “Thank you for your submission … we will get back to you as soon as possible.”
– Form caching is on
– Select “Flush the transient …”
– For Captcha, I try not to use it, and it hasn’t been a problem

5) Place the shortcode in the webpage.
– The shortcode will be something like this: [wpgform id=’128′], you will see this in the plugin’s list of the form setup pages which you created.
– Then make sure the new setting has taken effect by visiting the page. Depending on page caching it may not show up yet.

NOTES:
– Don’t expect that the “viewpage” link (which is shown in the wordpress plugin’s setup page for the form) will work… it may return a 404 error.
– The email notification with the data does *not* come from the plugin. It is defined in google forms, menu-item: Addons – EmailNotificationsForForms
– When you test the new webpage that it will include your widgets if you don’t change the page layout from default. Make sure your widgets look right (no “hello world” posts for example). Remember that your default widget content (example: footer) will show “Replace this content … blah blah blah” junk unless you you actually put something in those widgets, in the Appearance – Widgets settings