The following code has been added to my webpage and should render the live CodePen image, but instead it shows displays a link:
<p>Fitness app</p>
<div class="w3-half w3-grayscale-max">
<p data-height="364" data-theme-id="0" data-slug-hash="Njmvae" data-default-tab="result" data-user="seyicole" data-embed-version="2" data-pen-title="Fitness app" class="codepen">See the Pen Fitness app by seyi (#seyicole) on CodePen.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
</div>
Any ideas about why the CodePen isn't fully rendering? Thanks!
The CSS you'll also need to convert. Its in SCSS, not plain CSS. Luckily Codepen has options to view compiled HTML and CSS in the little arrow dropdowns so that helps. The other bit missing is, you are going to have to hook it up with some actual programming logic to make the animation advance with the steps.
On your CodePen page, click the Embed button in the lower right corner. From there you can select how you want the pen to display as it's embedded on your webpage. Then select the Copy & Paste Code.
It looks like the snippet in your question doesn't have the necessary data attributes:
<p data-height="265" data-theme-id="0" data-slug-hash="Njmvae" data-default-tab="js,result" data-user="seyicole" data-embed-version="2" data-pen-title="Fitness app" class="codepen">See the Pen Fitness app by seyi (#seyicole) on CodePen.</p>
You can read more about embedding pens on CodePen's blog.
Related
I am using this template : http://technext.github.io/humanity/
in the Blog News section the Read more button does not work on mobile.the only difference is that in the html code i have add an tag
<div class="button-main bg-fio-point">read more</div>
moreover the image also does not work as a link too on a mobile phone..
Any idea?
Please, make a coherent HTML. Turn the html like this:
<div class="button-main bg-fio-point">read more</div>
Your code is for special cases and for expert layouters. You must to use the normal and valid code like this purpose.
I have a html snippet, when i upload that to my website i see a small text called quiz maker, when i try to remove it, the snippet fails, so how do i remove the Quiz maker text and link, while making the snippet functional?
<div><a quiz="Q39I85" href="http://www.poll-maker.com/QuizMaker">Quiz Maker</a></div><script src="//cdn.poll-maker.com/quiz-embed-v1.js" async language="javascript"></script>
Use style attribute to set display property as none. This will hide the link but the script will find it and your code will not break. Have a look at the working snippet below.
<div><a quiz="Q39I85" href="http://www.poll-maker.com/QuizMaker" style="display:none;">Quiz Maker</a></div><script src="//cdn.poll-maker.com/quiz-embed-v1.js" async language="javascript"></script>
hi i am new to html and do not know any php or javascript. I have a simple html webpage with a picture in the middle. I want it so that when you click the picture text appears describing what the picture is but without going to a new webpage. is this possible to do on just html without using javascript or php and if so how is it done? thanks
It's possible to do something similar with the details and summary HTML5 elements.
See this Fiddle (Works only in Chrome/Safari/Opera)
<details>
<summary><img src="image-source"> Click here for more information</summary>
<p>more information</p>
</details>
Due to the lack of browser support, I would not recommend using them. See caniuse.com - summary
You could also use the HTML title tag. The text you wanted to appear would show up on mouseOver on all browsers.
<img src="xxxxxx" title="This is the title" />
Check out on Fiddle
I'm using Inspect Element in Google Chrome to figure out what is controlling the size of the slideshow controller buttons underneath the slideshow of this template website:
http://themefuse.com/demo/html/Medica/index-slider-2.html
When I click Inspect Element over the button "Cardiology" I see a line in the HTML code saying:
<li style="width: 192px; overflow: hidden;">Cardiology</li>
However, when I view source code of the page, no such line exists! This is a problem for me because I would like to edit the size of the button and the text inside it.
Please help! Thanks!
"Source code" is what the browser received from the server. It can be changed by JavaScript; the "Inspect Element" always shows the current shape of the document.
EDIT: Then again, sometimes things are not complicated. Look what I found in the source code:
<li>
<div class="textHolder">
<h3>Cardiology</h3>
<p><span><strong>Cardiac Rehabilitation Center</strong> We helped Glade Inc. design their latest fragrance for household perfumes </span></p>
</div>
<img src="images/temp/slider_img_01.jpg" alt="" />
</li>
It is then further modified by JS.
This list generated by JS. Check js/playSlider.js starting from line #335.
I wish to provide a quick demo about the contents of my website and how to use them in a proper way as soon as a user visits my page. I wish to give the demo using a popup type window at the top.
I mean small information boxes informing user about the various steps one by one. Can anyone help me how to do this?
Look at the jQuery UI dialog, it's fully customisable, or consider using some sort of tool tip idea, when you mouse over a part of the page feedback to the user what the section in question is for (via hovering mouse overs etc).
One simple way to do this is with javascript.
Try this
<script type="text/javascript">
alert("Hello world!");
</script>
visit this page for more information.
know this question is old but try intro.js
include js/css
<link rel="stylesheet" href="css/introjs.min.css">
<script type="text/javascript" src="jquery/intro.min.js"></script>
then on each item you want to show tutorial add the following
data-step="1" data-intro="Enter tip text"
<div class="span6" data-step="1" data-intro="Click here for help">
<div class="span6" data-step="2" data-intro="Click here for home page">