I'm trying to get these dumb image links in my mobile app to work, I have 3 different ones.. Email, Phone and Website. All fed dynamically. I got them at least able to do something, but it seems to like try to find it within the application itself.. can anyone help me figure out what I'm doing wrong? I'm really new to mobile applications, this is my first shot so it's rather different than everything else i've done.
<div class="row text-center" style="margin-bottom:20px;">
<div class="col">
<a style="display:block;text-decoration:none;" ng-href="tel:{{data.company.phoneNumber}}">
<div class="well bluegrad-Box">
<i class="fa fa-phone white-Icon"></i>
</div>
</a>
</div>
<div class="col">
<a style="display:block;text-decoration:none;" ng-href="mailto:{{data.company.emailAddress}}">
<div class="well orangegrad-Box">
<i class="ion-email white-Icon2"></i>
</div>
</a>
Thank you!!!!
Related
I’m using Bootstrap grid incorrectly and I’m can’t for the life of me work it out!
I designed this page so that it would split the image alongside the copy. I thought a simple split col-6 row in “Over 40 years Media Experience” would do it but it looks like the image is over 50%.
I want the image to go the width of the column. I’ve tried img-fluid and img-responsive but nothing is working as well as the HUGE (and inelegant!) workaround (written in the following two containers.
If anyone could take a look and see if I’ve missed anything crashingly obvious. I’d be forever grateful.
<div class="container container-head">
<div class="row">
<div class="col-12">
<h2>Over 40 years’ <span class="spotlight">media experience</span></h2>
</div>
</div>
<div class="row">
<div class="col-6-md media">
<div class="fsm-about-pic image-fluid">
<img src="images/about-joncorrinenew640.jpg"
alt="Jon and Corinne from Full Story Media">
</div>
</div>
<div class="col-6-md media-body">
<p><i class="far fa-circle"></i> Full Story Media is led by us: Jon Card
and Corinne Card. <!-- this could be a subtitle now with bit below as a testimonial like the client quotes -->
</p>
<p><i class="far fa-circle"></i> With over 40 years’ media experience between
us, we have written for every national newspaper in the UK, plus many other titles
worldwide.</p>
<p><i class="far fa-circle"></i> We are entrepreneurial, media savvy and believe
in the power of storytelling.</p>
<p><i class="far fa-circle"></i> We ensure our clients get the best advice. In fact, we
insist on it. </p>
<p><i class="far fa-circle"></i> We are also completely transparent about our
methods and tend to give away all of our knowledge.</p>
</div>
</div>
</section> ```
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>
Using font icons I put
<div data-icon="r"> </div>
to have an icon display for example.
Now if I like two or more of the same icon to display next to the first one can I only use multiple divs for that like so
<div data-icon="r"> </div>
<div data-icon="r"> </div>
<div data-icon="r"> </div>
or can one somehow write
<div data-icon="r" "r" "r"> </div>
or
<div data-icon="r,r,r,r"> </div>
or something along those lines?
Naturally all these tests fails so I wonder if this is generally possible in HTML and if so how please?
How about this?
<div>
<i data-icon="r"></i>
<i data-icon="r"></i>
<i data-icon="r"></i>
<i data-icon="r"></i>
</div>
This should create 4 inline icons. Im basing this on how font awesome works.
I'm working on a new project that's mainly based on Twitter Bootstrap. Problem is, I've been trying for days to figure out how to get the cells (from the grid) not to stack themselves on small resolutions.
I'd like instead that the content of my cells resizes itself, so everything is kept on one single row.
I use the .col-md-3 and .col-md-6 classes, here is my code:
<header>
<section id="left" class="col-md-3">
<i class="fa fa-circle greendot"></i>
<span>ALARM: OK</span>
<br/>
<i class="fa fa-circle orangedot"></i>
<span>DETECTION: SENSORS ISSUE</span>
<p id="logintext">
<?php
if(empty($_SESSION['user']))
{
echo('NOT LOGGED IN /// LOG IN');
}
else {
$uppercaseusername = strtoupper(htmlentities($_SESSION['user']['username']));
echo('WELCOME ' . $uppercaseusername . ' /// LOG OUT');
}
?>
</p>
</section>
<section id="banner" class="col-md-6">
<img src="banner.png" alt="FireGuard Main Banner" id="headerlogo" />
</section>
<section id="right" class="col-md-3">
<h3 id="time"></h3>
</section>
</header>
I hope that you understood what my problem is, I can provide screenshots if needed!
Thanks a lot in advance ;)
Ok I think you need to read the docs well before asking this question but let me sum it up for you.
Bootstrap 3+ has three different grids small(sm)- medium(md)- large(lg) each targeting a different screen size with a mobile first approach.
I will give you the solution but to really understand the mechanism of the framework invest sometime in reading it very well.
Change all of the (md) to (sm) and that should work for you, ex: col-md-3 => col-sm-3
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>