In the following html block I passed the image into the src attribute in multiple different ways, but the images do not display.
<article class="eventlist-event eventlist-event--upcoming eventlist-event--hasimg eventlist-hasimg eventlist-event--multiday"><a class="eventlist-column-thumbnail content-fill" href="">
<img class="eventlist-thumbnail" data-src="https://upload.wikimedia.org/wikipedia/commons/4/46/Lockheed_Martin_F-22A_Raptor_JSOH.jpg" data-image="https://upload.wikimedia.org/wikipedia/commons/4/46/Lockheed_Martin_F-22A_Raptor_JSOH.jpg" src = "https://upload.wikimedia.org/wikipedia/commons/4/46/Lockheed_Martin_F-22A_Raptor_JSOH.jpg">
</a>
<a class="eventlist-column-date" href="">
<div class="eventlist-datetag">
<div class="eventlist-datetag-inner">
<div class="eventlist-datetag-startdate eventlist-datetag-startdate--month">January</div>
<div class="eventlist-datetag-enddate">2017</div>
<div class="eventlist-datetag-status"></div>
</div>
</div></a>
<div class="eventlist-column-info">
<h1 class="eventlist-title"><a class="eventlist-title-link" href="">Deep Reinforcement Learning for Dialogue Generation </a></h1>
<p><font color="gray" font-family="squarespace-ui-font" font-weight="100">This is the abstract of the project ipso facto. </font></p>
</div>
<div class="clear"></div>
</article>
Is there anything I am missing here?
src = "https://upload.wikimedia.org/wikipedia/commons/4/46/Lockheed_Martin_F-22A_Raptor_JSOH.jpg"
Looks like you've got some whitespaces, have you tried src="https:...?
It doesn't appear to be problematic here, but depending on your view engine/src code it might be affected differently.
Related
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/
I have some lengthy HTML which is over the 80 character limit for my project. We have a style guide which restricts the number of characters per line, which is good because right now the line runs so long that you can't see it all without scrolling right.
<div id="email-signup-container">
<div id="mc_embed_signup">
<div class="interested">
<div class="container">
<div class="left col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h3>Help New York residents keep the heat on this winter.</h3>
DONATE
</div>
<div class="right col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h3>Without heat? Visit our resources page.</h3>
<a class="btn-interest" href="resources">RESOURCES</a>
</div>
</div>
</div>
</div>
</div>
Unfortunately, I can't find any style guides that cover multilining HTML. I worked on one project where we newlined things by attribute, but it was controversial:
<a
href="http://www.nycharities.org/donate/charitydonate.asp?ID=4081"
class="donate-btn btn-interest">DONATE</a>
Some people wanted the closing carot on a new line like this:
<a
href="http://www.nycharities.org/donate/charitydonate.asp?ID=4081"
class="donate-btn btn-interest"
>DONATE</a>
Other people wanted the closing tag at the same level as the opening tag:
<a
href="http://www.nycharities.org/donate/charitydonate.asp?ID=4081"
class="donate-btn btn-interest"
>
DONATE
</a>
I kind of hate all of them. Can anyone point to any published style guides that cover this so we can just adopt one and move on?
I've been wondering this as well. The only thing I could find was the guide from GoCardless, which says:
<!-- Try using line-breaks for multiple attributes, keeping the first attribute
on the tag's opening line -->
Good:
<div custom-attribute
class="something"
role="something-else"></div>
<!-- The closing tag ^^^ can stay on the same line for empty elements-->
<div custom-attribute
class="something"
role="something-else">
··Foo <!-- Otherwise nest plz -->
</div>
Not a definite answer, but I would like to add another suggestion: indenting the attributes twice, and the content only once.
An example:
<a
href="http://www.nycharities.org/donate/charitydonate.asp?ID=4081"
class="donate-btn btn-interest">
DONATE
</a>
For an a tag this kind of looks weird, but for longer tag-names, as are common in Angular, it looks fine:
<my-component
attribute1="val"
attribute2="val2"
attribute3="etc">
<span>Hello :)</span>
</my-component>
I am using microformat for the first time.
So as examples given on http://support.google.com/webmasters/bin/answer.py?hl=en&answer=164506, I changed the code.
This is the existing code that was present on the page:
<div class="evD mr10">
<div class="imgH fl"><img /></div>
<div class="infAr">
<h3>EVENT NAME</h3>
<h4><span>at</span>VENUE NAME</h4>
<p>Event Description</p>
<a class="tdd" href="#">Genre</a>
</div>
<div class="dth">
<div class="sfrD fl">
</div>
<div class="strE sn fl">
</div>
<div class="Buy">
<a class="bkT" href="buy_link"></a>
</div>
</div>
</div>
The Changes I made include :
Change the doctype to html5, and added microformat classes.
<div class="vevent evD mr10">
<div class="imgH fl"><img class="photo" /></div>
<div class="infAr">
<h3><a class="url summary" href="event_URL">EVENT NAME</a></h3>
<h4 class="location"><span>at</span>VENUE NAME</h4>
<p class="description">Event Description</p>
Genre
</div>
<div class="dth">
<div class="dtstart frD fl">DATE_START<span class="value-title" title="Date in ISO"></span></div>
<div class="dtend strE sn fl"><span class="value-title" title="Date in ISO"></span></div>
<div class="Buy tickets">
<a class="bkT offerurl" href="buy_link"></a>
</div>
</div>
</div>
I have the following questions/doubts :
Is it ok to have existing classes alongwith the microformat tags as done above?
As mentioned on http://support.google.com/webmasters/bin/answer.py?hl=en&answer=1093493#usage, it is not allowed to have display:none on the content. However, I pass the data set and paginate using javascript, in which I show the relevant data. So how do I make sure that these is not ignored.
I load the images which are on the current page, leaving the src as blank, and later change the src, as the page is changed. So initally the event's photo is blank.
How do I counter from a search engine reading as blank.
Thank you.
(Sorry about the question being so long)
1) that is no problem. You can even combine multiple types of semantic markup on the same tags.
2) 3)
If the data is hidden and in JavaScript/AJAX then it is highly unlikely Google will see it.
You may have to restructure your architecture to make your content crawlable. That's a big subject. I suggest looking up "progressive enhancement" which is the method I currently think is best.
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>
For those veterans who haven't tried Hpple, it's great. It uses Xpath for searching through HTML/XML documents. It gets the job done and it's easy enough for a newbie like me to understand. However, I'm having trouble.
I have this chunk of HTML:
<ul class="challengesList dailyChallengesList">
<li>
<div class="corner topLeft"></div>
<img id="ctl00_mainContent_dailyChallengesRepeater_ctl00_challengeImage" title="Gunslinger" src="/images/reachstats/challenges/0.png" alt="Gunslinger" style="border-width:0px;">
<div class="info">
<div class="rFloat">
<p id="ctl00_mainContent_dailyChallengesRepeater_ctl00_challengeExpiration" class="timeDisplay dailyExpirationCountdown"><span>0d</span><span>19h</span><span>9m</span><span class="seconds">37s</span></p>
<p>1500cR</p>
</div>
<h5>Gunslinger</h5>
<p class="description">Kill 150 enemies in multiplayer Matchmaking.</p>
<div class="reward">
<div id="ctl00_mainContent_dailyChallengesRepeater_ctl00_progressBox" class="barContainer">
<div id="ctl00_mainContent_dailyChallengesRepeater_ctl00_progressBar" class="bar" style="width:21%;"><span></span></div>
<p>31/150</p>
</div>
</div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="corner topLeft"></div>
<img id="ctl00_mainContent_dailyChallengesRepeater_ctl01_challengeImage" title="A Great Friend" src="/images/reachstats/challenges/0.png" alt="A Great Friend" style="border-width:0px;">
<div class="info">
<div class="rFloat">
<p id="ctl00_mainContent_dailyChallengesRepeater_ctl01_challengeExpiration" class="timeDisplay dailyExpirationCountdown"><span>0d</span><span>19h</span><span>9m</span><span class="seconds">37s</span></p>
<p>1400cR</p>
</div>
<h5>A Great Friend</h5>
<p class="description">Earn 15 assists today in multiplayer Matchmaking.</p>
<div class="reward">
<div id="ctl00_mainContent_dailyChallengesRepeater_ctl01_progressBox" class="barContainer">
<div id="ctl00_mainContent_dailyChallengesRepeater_ctl01_progressBar" class="bar" style="width:40%;"><span></span></div>
<p>6/15</p>
</div>
</div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="corner topLeft"></div>
<img id="ctl00_mainContent_dailyChallengesRepeater_ctl02_challengeImage" title="Cannon Fodder" src="/images/reachstats/challenges/2.png" alt="Cannon Fodder" style="border-width:0px;">
<div class="info">
<div class="rFloat">
<p id="ctl00_mainContent_dailyChallengesRepeater_ctl02_challengeExpiration" class="timeDisplay dailyExpirationCountdown"><span>0d</span><span>19h</span><span>9m</span><span class="seconds">37s</span></p>
<p>1000cR</p>
</div>
<h5>Cannon Fodder</h5>
<p class="description">Kill 50 infantry-class foes in the Campaign today.</p>
<div class="reward">
<div id="ctl00_mainContent_dailyChallengesRepeater_ctl02_progressBox" class="barContainer">
<div id="ctl00_mainContent_dailyChallengesRepeater_ctl02_progressBar" class="bar" style="width:0%;"><span></span></div>
<p>0/50</p>
</div>
</div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="corner topLeft"></div>
<img id="ctl00_mainContent_dailyChallengesRepeater_ctl03_challengeImage" title="Heroic Demon" src="/images/reachstats/challenges/3.png" alt="Heroic Demon" style="border-width:0px;">
<div class="info">
<div class="rFloat">
<p id="ctl00_mainContent_dailyChallengesRepeater_ctl03_challengeExpiration" class="timeDisplay dailyExpirationCountdown"><span>0d</span><span>19h</span><span>9m</span><span class="seconds">37s</span></p>
<p>1500cR</p>
</div>
<h5>Heroic Demon</h5>
<p class="description">Kill 30 Elites in Firefight Matchmaking on Heroic or harder.</p>
<div class="reward">
<div id="ctl00_mainContent_dailyChallengesRepeater_ctl03_progressBox" class="barContainer">
<div id="ctl00_mainContent_dailyChallengesRepeater_ctl03_progressBar" class="bar" style="width:0%;"><span></span></div>
<p>0/30</p>
</div>
</div>
</div>
<div class="clear"></div>
</li>
</ul>
The nutty part is, I cannot get Hpple to "see" the <div class="reward">. I'm using the following to find it:
NSArray * rawProgress = [doc search:#"//ul[#class='challengesList']
/li/div[#class='info']
/div[#class='reward']/p"];
This always returns an empty array. It's driving me nuts, as the same kind of thing worked for all of the other elements in this project...
Any help would be appreciated :)
EDIT
This works:
NSArray * rawDescriptions = [doc search:#"//ul[#class='challengesList']
/li/div[#class='info']
/p[#class='description']"];
This doesn't:
NSArray * rawProgress = [doc search:#"//ul[#class='challengesList']
/li/div[#class='info']
/div[#class='reward']
/div[#id]//p"];
Furthermore, trying to list the child nodes of rFloat or reward produces a crash :(
Your "p" element is not an immediate child of div class="reward".
Using XML you provided, XPath expression
div[#class='info']/div[#class='reward']//p
will work.
See this SO question for a similar report on problems with Hpple and a list of alternatives.
You may be seeing a bug. According to this page,
It's classified as an experimental
project by the developer, but so far
it's "worked for me"
UPDATE: seems to be kinda broken now.
Anyone got a better solution?
You may want to enter a bug report, and if the project is still being maintained, maybe the developer will respond with a fix or solution. Or you could leave a comment on this page that recommended hpple, and see if that blogger or one of his readers can address the problem or tell you if hpple is active at all.
You could also see if you can find HyperParser. "It's a simple HTML parser that has API similar to NSXMLParser. Designed specially to parse semi-valid HTML." But it doesn't seem to be there at the link where it used to be.