• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

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

Community Beginner ,
Jun 10, 2017 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

946

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
community guidelines
Community Expert ,
Jun 10, 2017 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 ???

Votes

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
community guidelines
Community Beginner ,
Jun 10, 2017 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]

Votes

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
community guidelines
LEGEND ,
Jun 10, 2017 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

Votes

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
community guidelines
Community Beginner ,
Jun 10, 2017 Jun 10, 2017

Copy link to clipboard

Copied

Votes

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
community guidelines
LEGEND ,
Jun 10, 2017 Jun 10, 2017

Copy link to clipboard

Copied

???

Votes

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
community guidelines
Community Beginner ,
Jun 10, 2017 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

Votes

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
community guidelines
Community Beginner ,
Jun 10, 2017 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

Votes

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
community guidelines
LEGEND ,
Jun 10, 2017 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.

Votes

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
community guidelines
Community Beginner ,
Jun 10, 2017 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.

Votes

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
community guidelines
LEGEND ,
Jun 10, 2017 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

Votes

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
community guidelines
Community Beginner ,
Jun 10, 2017 Jun 10, 2017

Copy link to clipboard

Copied

thank you for taking a look for me anyway

Votes

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
community guidelines
LEGEND ,
Jun 10, 2017 Jun 10, 2017

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Beginner ,
Jun 11, 2017 Jun 11, 2017

Copy link to clipboard

Copied

LATEST

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?

Votes

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
community guidelines
Guide ,
Jun 11, 2017 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

Votes

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
community guidelines
Community Beginner ,
Jun 11, 2017 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!

Votes

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
community guidelines
Guide ,
Jun 11, 2017 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.

Votes

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
community guidelines
LEGEND ,
Jun 11, 2017 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.

Votes

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
community guidelines
Guide ,
Jun 11, 2017 Jun 11, 2017

Copy link to clipboard

Copied

fotoroeder  написал(а)

... and what it should do.

This creates an animation for the pink line

Votes

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
community guidelines
LEGEND ,
Jun 11, 2017 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?

Votes

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
community guidelines
Guide ,
Jun 11, 2017 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.

Votes

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
community guidelines
LEGEND ,
Jun 11, 2017 Jun 11, 2017

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Explorer ,
Jun 11, 2017 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

Votes

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
community guidelines
Guide ,
Jun 11, 2017 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.

Votes

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
community guidelines
Explorer ,
Jun 11, 2017 Jun 11, 2017

Copy link to clipboard

Copied

Yes sorry, I wrote it inverted. My bad

Votes

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
community guidelines