Copy link to clipboard
Copied
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
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">
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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">
Copy link to clipboard
Copied
That worked, thanks.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
For the remote server root directory in my case (which corresponds to your "/httpdocs/", all I have is "/" How do I proceed?
Copy link to clipboard
Copied
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/
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
I should have said that the new site is labelled "dbcom copy"
Copy link to clipboard
Copied
It is better to hyphenate the two words, like in dbcom-copy
I cannot get in.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
A couple of fixes:
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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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:
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.