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>
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'm working with the Hot Towel Template and I'm trying to use the gridstack-angular package. I'm basically trying to add the demo functionality into my-page.controller.js, my-page.route.js and my-page.html.
I've used bower to load the dependencies and added 'gridstack-angular' to core.module.js. Here's where things break in my-page.html:
<section id="my-page-view" class="content">
<section class="matter">
<div container-fluid>
<h1>gridstack-angular demo</h1>
<p>{{vm.widgets}}</p>
<div>
<a class="btn btn-primary" ng-click="vm.addWidget()" href="#">Add Widget</a>
</div>
<br>
<div class="row">
<div class="col-md-12">
<div gridstack class="grid-stack grid1" options="vm.options" on-change="vm.onChange(event,items)" on-drag-start="vm.onDragStart(event,ui)"
on-drag-stop="vm.onDragStop(event,ui)" on-resize-start="vm.onResizeStart(event,ui)" on-resize-stop="vm.onResizeStop(event,ui)">
<div gridstack-item ng-repeat="w in vm.widgets" class="grid-stack-item" gs-item-x="w.x" gs-item-y="w.y"
gs-item-width="w.width" gs-item-height="w.height" gs-item-autopos="1" on-item-added="vm.onItemAdded(item)" on-item-removed="vm.onItemRemoved(item)">
<div class="grid-stack-item-content">
<a class="btn btn-primary" ng-click="vm.removeWidget(w)" href="#">remove</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Inspecting the browser shows that the directive referenced at:
<div gridstack ...>
cannot find its gridstack controller. The <p> and first <div> elements load fine. And yes, the includes are referenced as expected in index.html. Chrome gives me a 't.gridstack is not function'. It appears that gridstack-angular uses 2 controllers and a directive as wrappers for gridstack.js and I've been choking on the angular syntax trying to bake these into Hot Towel.
Bit by bower... needed to include jquery and jquery-ui before angular as can be seen in this post: Control order of source files
Hopefully what I am looking to do makes some sense.
I am working on a project that will hopefully simplify an existing tool that is used on a regular basis. It is highly outdated both in style and language. What I have done so far as designed a sample layout to test the functionality of this tool. The HTML and CSS code is here for view as it does not display well as embedded html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<div class="w3-container w3-black w3-center">
<h2 class="w3-text-red">Tool</h2>
</div>
<div class="w3-row-padding w3-margin-top">
<div class="w3-col" style="width:20%;">
<div class="w3-container">
<button onclick="document.getElementById('id01').style.display='block'" class="w3-btn">A***0</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container w3-card-8">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">×</span>
<p>Name:</p>
<p>Service 1:</p>
<p>Service 2:</p>
<p>Service 3:</p>
<p>Service 4:</p>
<p>Devices:</p>
<div class="w3-row-padding w3-margin-top">
<div class="w3-col" style="width:20%;">
<a target="_blank" href="#"><img src="" alt="Device 1"></a>
</div>
</div>
<div class="w3-row-padding w3-margin-top">
<div class="w3-col" style="width:20%;">
<img src="" alt="Device 2">
</div>
</div>
<div class="w3-row-padding w3-margin-top">
<div class="w3-col" style="width:20%;">
<img src="" alt="Device 3">
</div>
</div>
<div class="w3-row-padding w3-margin-top">
<div class="w3-col" style="width:20%;">
<img src="" alt="Device 4">
</div>
</div>
<div class="w3-row-padding w3-margin-top">
<div class="w3-col" style="width:20%;">
<a target="_blank" href="#"><img src="" alt="Device 5"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
When this is run in Chrome (used as corporate settings for IE block some code) you get a very small sample of the page (again simple testing purpose here).
This is using straight HTML/CSS3 to bring up a page with buttons. When the buttons are clicked the bring up a MODAL that will display specific information. As of now all the tags are very generic as this is for work and certain info is proprietary. What I am looking to do (again simple, needed only for testing) is when the button is clicked to bring up the MODAL that info will be passed from a database to fill in the info for that specific listing in the MODAL.
Example: Service 1 in MODAL needs to pull info from a database for a specific client/customer.
I am looking for the easiest way to do this on a local machine. I am not looking for building the entire database or deploying on corporate servers at that is way above my pay-grade and experience.
I currently have very limited experience in asp.net MVC4 and SQL (Meaning I have just started learning both and have completed the MVC Music Store Tutorial) So I think that I could build something with that but wanted to know if there was an easier way to do so with just html/css and possibly MSACCESS as I have access to that while working.
I am currently building the DB in ACCESS and that should be done in the next day or so depending on how busy I am with my other job functions.
Any assistance would be greatly appreciated. Thank you all for you time.
Edit: Is this possible using JavaScript and a Database file or would i definitively need to be running some type of server (even IIS) to make this possible. I am very limited in the tools I have on my work system.
HTML and CSS deal with presentation and layout, comprising the front-end. Your database and application language of choice (C#, PHP, etc) comprise the back-end.
It sounds like you would want to either develop this as an MVC project or use JavaScript to perform AJAX requests. The AJAX request would receive data from some sort of controller action or application page and display it where you want.
There are lots of different ways of getting and manipulating data; it's all very subjective and depends on your requirements. This is a question that you will need to answer on your own.
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.