Highlighted

Embedding HTML means the rest of my content disappears, any ideas?

Community Beginner ,
Jun 10, 2017

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.

Views

688

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Embedding HTML means the rest of my content disappears, any ideas?

Community Beginner ,
Jun 10, 2017

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.

Views

689

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 10, 2017 0
Most Valuable Participant ,
Jun 10, 2017

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 ???

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2017 0
Community Beginner ,
Jun 10, 2017

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]

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2017 0
Adobe Community Professional ,
Jun 10, 2017

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2017 0
Community Beginner ,
Jun 10, 2017

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2017 0
Adobe Community Professional ,
Jun 10, 2017

Copy link to clipboard

Copied

???

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2017 0
Community Beginner ,
Jun 10, 2017

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2017 0
Community Beginner ,
Jun 10, 2017

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;

Home

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2017 0
Adobe Community Professional ,
Jun 10, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2017 0
Community Beginner ,
Jun 10, 2017

Copy link to clipboard

Copied

fotoroeder

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2017 0
Adobe Community Professional ,
Jun 10, 2017

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2017 1
Community Beginner ,
Jun 10, 2017

Copy link to clipboard

Copied

thank you for taking a look for me anyway

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2017 0
Adobe Community Professional ,
Jun 10, 2017

Copy link to clipboard

Copied

Wlecome – no big deal. Where did get this code from?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2017 0
Community Beginner ,
Jun 11, 2017

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2017 0
Guide ,
Jun 11, 2017

Copy link to clipboard

Copied

Too much unnecessary code.
fb04676e28.png

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>

975f0d9f5b.png

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.

96dabe2541.png

Example here Home

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2017 0
Community Beginner ,
Jun 11, 2017

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2017 0
Guide ,
Jun 11, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2017 0
Adobe Community Professional ,
Jun 11, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2017 0
Guide ,
Jun 11, 2017

Copy link to clipboard

Copied

fotoroeder  написал(а)

... and what it should do.

This creates an animation for the pink line

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2017 0
Explorer ,
Jun 11, 2017

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2017 0
Adobe Community Professional ,
Jun 11, 2017

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2017 0
Guide ,
Jun 11, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2017 2
Explorer ,
Jun 11, 2017

Copy link to clipboard

Copied

Yes sorry, I wrote it inverted. My bad

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2017 0
Guide ,
Jun 11, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2017 1
Adobe Community Professional ,
Jun 11, 2017

Copy link to clipboard

Copied

Ooops. Thanks. I would not be embarrassed to do this, as of this reading.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2017 0