Having had some very basic HTML involvement in a previous website I was involved with, I am learning HTML and CSS in an effort to be able to do more work on my new website.
Currently I have a static image of a Youtube video, with a link that opens up a fullscreen player on a new page, but I'd like to replace that static image with an embedded Youtube player to play the video on my webpage.
There are a few places on the webpage (http://www.johnpearsesafaris.com/page-news-ls.html#) this method is used, but I am trying initially to just make the change to the uppermost image of the falcon with wings splayed, under the title 'How Did they ever film this?"
I initially went to the youtube site that explains the various embed player options they have and decided to go with the iframe one, as i have used iframes elsewhere before.
On my first attempt, I managed to get the player to embed itself and the video to play, but unfortunately it screwed up the rest of the formatting on the page. The static images for all the others News posts below it disappeared and the formatting of the rest of the page went out of whack.
=I then looked at a number of different guidelines on how to do it, and have spent a number of hours trying to rectify the situation, but I can't seem to overcome the break in formatting.
What I did was replace the HTML between rows 166 and 185 with the following HTML:
<div class="row">
<div class="loop-posts eight columns">
<div id="div3" class="post-CLASS blog-post-item b30">
<div class="post-heading">
<h2 class="blog-title"><a
href="https://www.youtube.com/v/XBEyCr5AoIs" target="_blank">How
did they ever film this?</a> </h2>
<div class="blog-meta"> <span class="blog-date">FEB
2014 <span class="blog-author"><span>
By </span><a class="blog-author-tooltip" rel="tooltip" data-original-title="View all posts by TheEditor" href="#">The
Editor</a>
</span>
</span>
</div>
</div>
<div class="blog-thumb-wrapper">
<iframe src="//www.youtube.com/embed/XBEyCr5AoIs" allowfullscreen="" frameborder="0" height="360" width="640"></iframe>
</div>
<div class="blog-excerpt">
<p>How did they ever film this?</p>
</div>
</div>
</div>
</div>
I am hoping that it's a simple oversight on my part. What is really confusing me is the div classes.
I confess I don't know enough about them but have been watching multiple instructional videos and using various other sources in a desperate effort to get up to speed.
I would really appreciate any help / guidance anyone could give me in helping me resolve the matter. I will continue to try to fix it on my own in the meantime.
Replace with this:
<div class="row">
<div class="loop-posts eight columns">
<div class="post-CLASS blog-post-item b30" id="div3">
<div class="post-heading">
<h2 class="blog-title"><a href=
"https://www.youtube.com/v/XBEyCr5AoIs" target="_blank">How
did they ever film this?</a></h2>
<div class="blog-meta">
<span class="blog-date">FEB 2014 <span class=
"blog-author">By <a class=
"blog-author-tooltip" data-original-title=
"View all posts by TheEditor" href="#" rel=
"tooltip">The Editor</a></span></span>
</div>
</div>
<div>
<iframe frameborder="0" height="360" src=
"//www.youtube.com/embed/XBEyCr5AoIs" width="640"></iframe>
</div>
<div class="blog-excerpt">
<p>How did they ever film this?</p>
</div>
</div>
</div>
</div>
Related
I have a piece of markup where when a user clicks on "find a rider" the browser is supposed to take the user down to where the participants are on the same page. But when clicking the link it just takes me to a page not found on chrome, edge, and firefox (can't test safari).
<div class="container-fluid blue">
<div class="container text-center">
<h1 class="white">Prairie Women on Snowmobiles</h1>
Find a Rider
<div class="row">
<div class="col-lg-12" style="margin-bottom: 15px;">
<div class="hero elevation-z12" style="background-image: url('../images/content/pagebuilder/PWOS_banner.jpg');"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">Prairie Women on Snowmobiles</h2>
<p>A non-profit organization whose annual missions are provincial awareness events that are designed to focus attention on breast cancer and the recreation of snowmobiling as well as raise the much-needed funds for breast cancer research. Over the past 18 years we have raised almost $2.5 million for the cause. To learn more about Prairie Women on Snowmobiles click here.</p>
</div>
</div>
<div class="container">
<div class="text-center">
<h2>Riders</h2>
<p>Meet our 2020 Riders</p>
</div>
<div class="events">
<div class="event-display" id="find">
[[S51:PWOS_SK_reus_riders]]
</div>
</div>
</div>
</div>
normally to fix this I would just put the url in the link "../site/SPageServer/?pagename=PWOS_SK_homepage#find" and that works, however, doing that will break my url tracking if people land on the page using the vanity url.
Here's a link to the page:
https://secure2.convio.net/cco/site/SPageServer/?pagename=PWOS_SK_homepage
any help is appreciated.
thanks,
Your page starts with <base href="https://secure2.convio.net/cco/site/" /> so when you click on href="#find" it resolves to https://secure2.convio.net/cco/site/#find.
You need to write your URL relative to the base URL, not the current page.
As mentioned in a comment, it would be better to do this with simple JS instead of playing with browser functionality. Without touching the HTML and assuming you have jQuery on the site, I would add something like the following in a script tag (obviously below both the <a href='#find'> and div#find)
jQuery("a[href='#find']").click(function() {
event.preventDefault();
jQuery("body, html").animate({
scrollTop: jQuery("#find").offset().top
});
})
This allows you to stay on the page without linking away/messing up tracking data while the window will scroll to the proper element no matter how far down. Hope this helps (even though you managed it before me ;) )
When you hover the mouse over the link you see:
https://secure2.convio.net/cco/site/#find
but you expect:
https://secure2.convio.net/cco/site/SPageServer/?pagename=PWOS_SK_homepage#find
This is caused by the tag in the header.
I have two divs that act as links (<a>). One in one paragraph, the other in the second paragraph. The second link works: on mouseover (in Chrome) the bottom left of the window displays the link address. The top one does not do the same. What is wrong? I'm talking about the links in the paragraph tags, not the menu links.
<body ontouchstart>
<div class="header">
<div class="logo">Q<sup>3</sup></div>
<div class="desc">Quito's Qustom Qode</div>
</div>
<div class="row">
<div class="sidenav col2">
<a id="about" class="link-active">about</a>
<a id="pricing">pricing</a>
<a id="projects">projects</a>
<a id="legal">legal</a>
</div>
</div><!-- /row -->
<div class="row">
<div id="content" class="col10">
<div class="info">
<div class="about">
<div class="profile-back">
<div class="profile"></div>
</div>
<div class="about-me">
<p>Kevin (Quito [Key'-tow]) Williams is an aspiring front-end web designer. He has 5 years of experience in HTML, 4 years experience in CSS, and is currently studying jQuery. As a modern web designer, he is using his coding background to study the latest web technologies: HTML5, CSS3, RWD. In addition to his web technology languages, he is also familiar with: C<sup>++</sup>, Javascript, Java, Perl, Lua (Minecraft based), LISP, SQL. </p>
<p>Hello</p>
You've forgotten to add the actual link on your anchor tags through href.
Your current code:
<a id="about" class="link-active">about</a>
<a id="pricing">pricing</a>
<a id="projects">projects</a>
<a id="legal">legal</a>
Changes:
about
pricing
projects
legal
Can you be a bit more clear about what outcome you are expecting?
Edit: I think i understand now, "About" "Pricing" "Projects" should be hyperlinks?
you are missing the "href" attribute in the tags which should fix your problem.
If you don't want the link to direct to a different page, you can use href="#" to stop this.
Are you on about the following lines?
RWD.
<p>Hello</p>
If so, both are working fine in chrome and IE for me. I'm not sure what the issue is for you.
try this code,add target="_blank" in your a href
<p>Hello</p>
And the working fiddle link is here https://jsfiddle.net/p7mnsj3p/
After readings on schema.org I wrote a small "rich snippet" or what ever it is called. We were found today by google, but no stars and ratings were shown. Maybe someone has expierence with it and know how things are done? Does it only depends on microdata or also on anything else in <head> tags? Otherwise what is wrong with my snippet?
Here is my snippet:
<div itemscope itemtype="http://schema.org/Organization">
<div class="row">
<div class="col-sm-6">
<div class="clogo-container">
<img src="logo.jpg" alt="logo" class="logo" />
</div>
<div class="infos">
<span class="website">https://localhost</span><br/>
is a page made by<br/>
<br/>
<span class="name" itemprop="name"><b>Mypage</b></span><br/>
</div>
</div>
<div class="col-sm-6">
<div class="rate" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<div class="ratingbox">
<img src="image.jpg" alt="Logo" />
<b><span class="name">Mypage</span></b>
<div class="main-rating" id="customer-1-rate"></div>
<span class="vote">
<span itemprop="ratingValue">4.44</span>
<meta itemprop="bestRating" content="5"/>
<meta itemprop="worstRating" content="1"/>
/ 5.00</span><br/>
<span class="total">out of
<span itemprop="ratingCount">34</span>
total</span>
</div>
</div>
</div>
</div>
</div>
Your use of Microdata and Schema.org seems to be fine, and Google’s SDTT reports no issues and says that you provide all necessary data for their Aggregate Ratings Rich Snippet. So technically everything seems to be correct.
That means the issue (that you don’t see a Rich Snippet for your result) probably has to do with Google’s policies. There are various possible reasons why a search result feature doesn’t get displayed for a result. And note that they never guarantee displaying one, even if everything is correct.
Typical (but not the only) reasons:
You have to wait longer. It can take a long time (after indexing) until Rich Snippets appear.
You checked the search result for your homepage (or you only have this markup on your homepage). Google doesn’t show Rich Snippets for homepages.
Your page content doesn’t "look like" it contains aggregated ratings, or your hide them visually.
I have a multi page document and the home page links to other pages without a hitch however if I try to link to another page from the content of a page it does nothing, the link is just dead. same on mobile and desktop. Here is the code for the whole of page 4 (the page where I am trying to insert these links) My document has 7 pages in total. The first issue is on line 16, my link is:
<a href="#webdesign">
however this does nothing even though I have a page called 'webdesign'
<!-- Start of fourth page -->
<script>
$(document).on('click', 'a.webdesign', function () { $.mobile.changePage('#webdesign'); });
</script>
<div data-role="page" id="services">
<div data-role="header1">
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/magnetikmedia_header.png" width="90%"></div>
</div>
<div>
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/services_banner.png" width="100%"></div>
</div><!-- /header -->
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true">
<h3>Website Design</h3>
<p>We offer a full website design service whether you are looking for a basic, low maintenance site to create your online presence, a responsive site to attract more mobile browsers or an advanced, dynamic e-commerce site to power your business to the next level. We also offer a website content management service so whether you need any information editing or amending your current site or would like a page or two adding then we can do this for you. Read more about our website design services</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>facebook Development</h3>
<p>The most striking part of any facebook business page is the cover image. This, along with your profile, can make or break a facebook page. We design custom cover images perfectly suited to your industry and business to really enable you to stand out and make visitors want to 'like' you! Read more about facebook timeline design</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>twitter Design</h3>
<p>We can create custom backgrounds for your Twitter pages that can incorporate your logo, contact details or, in fact, anything you like. This helps you move one step closer to catching the eye of potential customers who will be passing by (and there will be a lot based on the fact there are over 140 million active users!) Read more about twitter design</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Email Marketing</h3>
<p>Our dynamic e-mail campaign service means we can create a custom newsletter, an advert for a special offer or just a courtesy message to your customer base that is professionally designed and can be mailed out to as many customers as you wish. Not only that but it will be fully trackable so you can keep tabs on who has read the email or who has yet to open it. We can even add a secure, online subscription form to your website or facebook page where potential new customers can sign up to your mailing campaigns which are then integrated automatically so they are ready to be included in your next mailout. Read more about email marketing</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Animation</h3>
<p>From animated email footers to full promotional videos, flash animation can be a useful tool to showcase your product or services to the world in an attractive and fun way. Read more about our animation services</p>
</div>
</div>
<div align="center"><!-- /content -->
<div id="footer1">
<div id="footer_left">
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/fbook_foot.png" width="30" height="30" style="margin-right:10px;" ><img src="http://www.magnetikmedia.co.uk/m/images/twitter_foot.png" width="30" height="30" style="margin-right:10px;" ><img src="http://www.magnetikmedia.co.uk/m/images/blogger_foot.png" width="30" height: "30" style="margin-right:10px;" ><img src="http://www.magnetikmedia.co.uk/m/images/linkedin_foot.png" width="113" height="30" style="margin-right:10px;" ></div>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div align="center"><!-- /footer -->
There was one closing div missing, added that and all fixed.
I'm not sure if this is really the best method, but I've only been working with joomla for two days so am very inexperienced.
Basically I have an html container in my template that holds a carousel extension and a set of images. The container has a blue background in contract to the white of the rest of the website.
I basically want to toggle that container with the extension on different pages. Here's my code:
<div id="top">
<div id="photos">
<jdoc:include type="modules" name="carousel" />
</div>
<div id="social_media">
<a id="success" href="#">Read about our success stories</a>
<a id="partner" href="#">Be a partner</a>
<a id="facebook" href="#">Join us on Facebook</a>
</div>
</div>
What I want to do is make this entire chunk of code into a Custom HTML module that only display on certain pages.
I've attempted to do this but the extension for the carousel doesn't show up, nor the jdoc:include part. I'm guessing this is because Joomlas text editor doesn't interpret jdoc:includes the same way the joomla engine does.
Is there any way around this?
In order to load a module within an article (or a Custom HTML module) you want to use the loadposition command. Here is what it would look like in your case:
<div id="top">
<div id="photos">
{loadposition carousel}
</div>
<div id="social_media">
<a id="success" href="#">Read about our success stories</a>
<a id="partner" href="#">Be a partner</a>
<a id="facebook" href="#">Join us on Facebook</a>
</div>
</div>