Replacement for Spry.Effect.DoGrow

Report · Jan 19, 2018

I am updating our website dominiquebello.com to make it responsive, using bootstrap

The original uses Spry.Effect.DoGrow on a couple of the pages. What can I use to get the same effect in a bootstrap context, since Spry is no longer in use?

Thanks

Jerry

Report · Jan 19, 2018

Copy and paste the following into a new document and view in browser.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
img.zoom {
height: 100%;
width: 100%;
position: fixed;
background-color: #d9dfe5;
-webkit-animation: zoomer 2s;
animation: zoomer 2s;
-webkit-transform: scale(0,0); 
transform: scale(0,0);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes zoomer {
100% {
-webkit-transform: scale(1,1); 
}
}
@keyframes zoomer {
100% {
transform: scale(1,1); 
}
}
</style>
</head>
<body>
<img src="http://dominiquebello.com/images/IndexImage/1.jpg" alt="" class="zoom">
</body>
</html>

Wappler, the only real Dreamweaver alternative.

Report · Jan 20, 2018

Thanks, Ben.

That works--now to see how to embed it in the index page. I'll leave the discussion open in case I have difficulty doing that.

Thanks again

Jerry

Report · Jan 20, 2018

I just tried real time preview of the code again, and this time I get the message (in either Safari or Firefox): "You tried to access an external HTML page, which can not be opened on the device for preview. Open the page in Dreamweaver to preview the page on the device."

What can I do about that? (Of course I had started off in Dreamweaver)

And how to I escape from this style--I seem to be locked into it?

Thanks

Jerry

Report · Jan 20, 2018

For some browsers, the link to the image must be within the same domain as the main document. The best way is to have the image located in the local images folder and to rename the link to <img src="images/IndexImage/1.jpg" alt="" class="zoom">

Wappler, the only real Dreamweaver alternative.

Report · Jan 21, 2018

That worked, thanks.

Report · Jan 24, 2018

I'm in the process of creating the page using bootstrap, and have got as far as the navbar, following the procedure in Jim Maivald's book. When I try to preview what I've done so far in a browser, I get the same message, even though as far as I can tell all the files I'm linking to are in the same domain.

If you want to look at my code, please tell me how to send it to y ou

Thanks profusely

Jerry

Report · Jan 24, 2018

The best way is to upload the site to a temporary folder which could be named 'newsite' or similar. To upload the files from Dreamweaver you will need to make the 'newsite' your root directory as per

Wappler, the only real Dreamweaver alternative.

Report · Jan 26, 2018

Thanks, Ben. Pardon my ignorance, but how do I access the window you show me here?

What I have done is created a copy of the original site and am working in that. For the moment, I just want to reproduce the original as closely as possible in a Bootstrap framework.

Thanks again

Jerry

Report · Jan 26, 2018

We have all been there, no need to apologise.

In DW menu items Site -> Manage Sites and choose the site that you are working on. Click the Edit button (pencil) and in the new window choose Servers.

Note that the root directory of the remote server may not be called httpdocs, this could be www or similar. The important part is that you can upload to a newsite (or similar) folder to do your testing.

Forgot to say that the FTP Address, Username and Password will be the same as the existing site.

Wappler, the only real Dreamweaver alternative.

Report · Jan 27, 2018

Thanks, Ben.

I have been talking to our web host and I gather that the only way of doing what you suggest is to temporarily replace our current website with the new one that is under construction. Is that what you have in mind, or is there some other way to get my code to you?

Report · Jan 27, 2018

No, do not touch the current site! with the exception of the following.

My assumption is that you have created at least two sites in Dreamweaver, one for the original site and the other for the proposed site. We will call them oldsite and newsite respectively.

oldsite:

In Dreamweaver open the oldsite and at the top of the Files panel, click on the Expand to show local and remote sites button

The current window now shows both remote and local files. You may need to click on a warning message asking for the connection to be made or similar.

On the Remote Server side, note the name of the root directory, which in my case is /httdocs/. Right-click /httpdocs/ and choose New Folder and name the new folder newsite or similar.

newsite:

Now open the newsite in Dreamweaver. Open the Site Setup panel as described in reply #9. If you have not done so as yet, add a New Server and add the details as required, making sure that the Root Directory has been properly named as /httpdocs/newsite/. To setup a new site see How to set up connection between Dreamweaver and the publishing server.

Wappler, the only real Dreamweaver alternative.

Report · Jan 28, 2018

For the remote server root directory in my case (which corresponds to your "/httpdocs/", all I have is "/" How do I proceed?

Report · Jan 28, 2018

I had a look at Ipage documentation and you are correct, "/" is the root directory. In this case the Root Directory for newsite should be

/newsite/

Wappler, the only real Dreamweaver alternative.

Report · Jan 29, 2018

I believe I've done what you asked me to do. Let me know if you find what you need.

And if so, please tell me how I can access it myself.

At this point my new "index" page is working, apart from the zoom, and I am able to preview it in the browser:

1. In the original, the content to the left of the image narrows as the image grows, a nice effect

2. In the new version, the image itself is distorted and spills out of the window on the right.

3. The caption appears above the image, and disappears when the image finishes its zoom--I would rather it appeared below the image, as in the original.

4. The bootstrap framework seems to be working, in that the text narrows in small screens; but I'm not sure the image is handled correctly.

5. I still need to take care of a lot of formatting details, but wanted to get the zoom working before I do that

Thanks again

Jerry

Report · Jan 29, 2018

I should have said that the new site is labelled "dbcom copy"

Report · Jan 29, 2018

It is better to hyphenate the two words, like in dbcom-copy

I cannot get in.

Wappler, the only real Dreamweaver alternative.

Report · Jan 30, 2018

I've managed to mess things up. I inadvertently uploaded the files for dbcom-copy (I added the hyphen, as you suggested, so what is on the server now is only the new version in progress.

I have tried to upload the original version, but can't manage to do so.

How do I attach the log of the failure? I hope that with that you can tell me what to do to restore the original.

In the meantime, you can have a look at what is there now.

Report · Feb 01, 2018

Have you given up on me, Ben? I haven't seen any posts from you for a few days.

If you are still involved, it is now easy to see my code. The home page ("index") in dominiquebello.com is the new page I am trying to create. To see the original, go to one of the other pages, and if you navigate back to "welcome" it takes you to the "oldindex" page

Report · Feb 01, 2018

I am sorry, I did see the new page and thought: 'why on earth would you want to return to the old Welcome page?'.

The only problem I see is that the image extends outside of the main container and is not responsive.

I have been extremely busy, working nigh on 16 hours a day, seven days a week and my customers are still hounding me. Please bear with me while I untangle myself and I shall get back with an answer.

If you do want to resurrect your original Welcome page, all you need to do is create a folder/directory call newsite or similar and place the new site into that folder as I described above.

Wappler, the only real Dreamweaver alternative.

Report · Feb 01, 2018

A couple of fixes:

Line #2 delete <div class="container"> - this is illegal
Line #23 delete position: fixed; - causes problems for the layout
Line #115 delete </div> - closing tag from line #2

NB: it is best to start fixing the code from the bottom of the list up, otherwise the line numbers will not correspond.

If this does not answer your question, please come back.

Wappler, the only real Dreamweaver alternative.

Report · Feb 02, 2018

Thanks for the quick response, Ben. That works. I have no idea where the stray div came from--should have caught that one myself. Glad to see the problem could be fixed so easily.

I will now proceed to clean up the page, but have two questions:

Does the bootstrap framework preclude the full spry effect I had in the original (see the contact page for reference? In that case, the zoom starts with the text taking up half the width of the page, then narrowing at the same time as the image enlarges.

And in the bootstrap framework, I would have thought that the text and image would stack on small screens, rather than remaining side-by-side, albeit with the text narrower than on big screens

Report · Feb 02, 2018

1. The bootstrap framework will work fine with SpryEffects. The difference between SpryEffects and the example that I have shown is that the former uses JavaScript and the latter uses a more modern version of CSS which is currently the preferred method.

2. Change:

line #93 to <article class="col-md-3">
line #108 to <figure class="col-md-9">

Wappler, the only real Dreamweaver alternative.

Report · Feb 02, 2018

On the first, I thought I had been told that I had to move away from Spry. In any case, I guess I won't try to see how to get Spry working in Bootstrap.

On the second, I believe you mean line 104, which works.

Thanks very much for all your help on this. I trust I will be able to clean up the remaining details of the page.

Report · Feb 02, 2018

DBSilk wrote
On the first, I thought I had been told that I had to move away from Spry. In any case, I guess I won't try to see how to get Spry working in Bootstrap.

There are parts of Spry that are no good for today's environment. The SpryMenuBar is one of those because it is not touch screen friendly. There is nothing wrong with using SpryEffects even today except that it is not seen as a modern way of creating effects.

DBSilk wrote
On the second, I believe you mean line 104, which works.

Sorry about that, you are right.

Start a new discussion for any new problems.

Wappler, the only real Dreamweaver alternative.

Adobe Community

Replacement for Spry.Effect.DoGrow

1 Correct answer