Copy link to clipboard
Copied
This is the code I am using;
<div class="loadIt"></div>
<style type="text/css">
.loadIt{
height:3px;
background-color:#FF3EB5;
animation: widthAni 1s forwards ;
box-shadow:0px 2px 3px rgba(0,0,0,0.10);
}
@keyframes widthAni{
0%{
width:0px;
}
100%{
width:1200px;}
}
It means that the image I have disappears and the icons on the side for twitter, facebook, instagram, they all disappear except for the styling on the icons so colour pops up when I mouse over.
Copy link to clipboard
Copied
The Lounge Forum is not for technical help, please provide the name of the program you are using so your message may be moved to the correct program forum... A program would be Photoshop or Dreamweaver or Muse or Premiere Pro or ???
Copy link to clipboard
Copied
Oh sorry, I am using adobe muse
[Moved from the non-technical LOUNGE Forum to the Program forum... Mod]
[Here is the list of all Adobe forums... https://forums.adobe.com/welcome]
Copy link to clipboard
Copied
Could you upload as a provisional site to BC?
Otherwise we could not know where to look at.
What should that code normally do?
We also have some coders in this forum, the might know.
Regards,
Uwe
Copy link to clipboard
Copied
Copy link to clipboard
Copied
???
Copy link to clipboard
Copied
Sorry, it seemed that it wouldnt let me type when I attached the photo, so above is how its supposed to look as the screen shot vs how it actually looks uploaded to BC
Copy link to clipboard
Copied
I've uploaded to business catalyst and above is a screenshot of what it's supposed to look like and here is a link;
Copy link to clipboard
Copied
AJLangtry schrieb
This is the code I am using;
<div class="loadIt"></div>
<style type="text/css">
.loadIt{
height:3px;
background-color:#FF3EB5;
animation: widthAni 1s forwards ;
box-shadow:0px 2px 3px rgba(0,0,0,0.10);
}
@keyframes widthAni{
0%{
width:0px;
}
100%{
width:1200px;}
}
It means that the image I have disappears and the icons on the side for twitter, facebook, instagram, they all disappear except for the styling on the icons so colour pops up when I mouse over.
Referring to your original question: when does what disappear? Where did you see this? On the worldwideweb, in preview, in muse?
I highly recommend to upload to BC or give us a link from your hosting if you got it uploaded somewhere.
Preview from the muse menu is sometimes not really like the web on a server or like preview in the browser.
Copy link to clipboard
Copied
I've been creating the site in Adobe Muse, I have added a div for an animated loading bar which is positioned at the bottom of my page with the code;
<div class="loadIt"></div>
<style type="text/css">
.loadIt{
height:3px;
background-color:#FF3EB5;
animation: widthAni 1s forwards ;
box-shadow:0px 2px 3px rgba(0,0,0,0.10);
}
@keyframes widthAni{
0%{
width:0px;
}
100%{
width:1200px;}
}
The link to BC is here http://ajlnew.businesscatalyst.com/index.html
Even when uploaded to BC it's not showing the images like the screenshot I posted above.
Copy link to clipboard
Copied
I see, or even worse I don`t see. Sorry, I thought it might be a preview or what so ever issue from local hosting or something.
You have to wait for some coders, I am afraid.
Best Regards,
Uwe
Copy link to clipboard
Copied
thank you for taking a look for me anyway
Copy link to clipboard
Copied
Wlecome – no big deal. Where did get this code from?
Copy link to clipboard
Copied
As you keep asking me where I got this code from, I was given it by a developer. The code works, I can see it working when I use it on the site and when I export the site. Its the REST of the page that doesn't load.
So with that in mind can we move passed the code of the loading bar, it works. I need the height to specify the sizing and the colour to specify what colour it is, otherwise I'm simply saying move forward... what moves forward?
Copy link to clipboard
Copied
Too much unnecessary code.
And only part of the code remains.
<style type="text/css">
.loadIt {
animation: widthAni 1s forwards ;
}
@keyframes widthAni {
0% {
width:0px;
}
100% {
width:1200px;}
}
</style>
I can not even imagine how you built this code and what you did with the code of your site. It looks like a complete mess.
Example here Home
Copy link to clipboard
Copied
Thanks for the reply Pavel.
I haven't touched the coding on my site because I am working on Adobe Muse. I simply wanted to know why, when I import the HTML, the rest of the content on my page disappears!
Copy link to clipboard
Copied
AJLangtry написал(а)
I simply wanted to know why, when I import the HTML, the rest of the content on my page disappears!
I do not know how you import the code, and I do not see your muse project file, so I can not answer this question. I showed you how it can be done correctly and no objects disappear.
Copy link to clipboard
Copied
This leads back to my question where did you get this code from? Who told you that it works and what it should do.
Copy link to clipboard
Copied
fotoroeder написал(а)
... and what it should do.
This creates an animation for the pink line
Copy link to clipboard
Copied
Thanks. Isn`t this possible with edge animate or something similar from Adobe?
Would that be easier? Or does the proper code, placed in the right spot, do it?
Copy link to clipboard
Copied
fotoroeder написал(а)
Isn`t this possible with edge animate or something similar from Adobe?
It will be the same as building a nuclear power plant just to light one small light bulb.
The code mentioned in this topic is 1000 times simpler and 1000 times easier for the site than the use of edge animate.
If you make this little pink line in edge animate and insert into Muse, you get a lot of code. This will be the site inserted into Muse via iframe.
Copy link to clipboard
Copied
Ooops. Thanks. I would not be embarrassed to do this, as of this reading.
Copy link to clipboard
Copied
I agree with Pavel, I find unnecessary inserting html code to give effects than can be reproduced using Muse tools, also styling code should be inserted on the body not the head of your document unless is inline CSS (which is not), only scripts and hyperlinks should be on the head, and before you make use of scripts you have to make sure that your scripts are compatible with the scripts used by Muse to avoid conflicts that will not render that page properly.
Also the entire custom code needs a bit of work for it to display properly.
I suggest you to follow Pavel's instructions and use Muse stock tools for the desired animation.
Good Luck
Copy link to clipboard
Copied
I'm afraid you do not understand. I removed only a part of the code, replacing it with stock tools. But for animation you need css code and this code should be installed in HEAD.
Urbansaol написал(а)
only scripts and hyperlinks should be on the head,
Basically, only CSS should be in HEAD. And some scripts, such as Google Analytics.
All other scripts must be at the bottom of the document, before the closing </ body>. This is especially true for jQuery.
Copy link to clipboard
Copied
Yes sorry, I wrote it inverted. My bad