In a dialog i want to display several download links with a caption on the same line :
<md-dialog-content>
<div align="center" id="download">
<a ng-href="https://community.site.com/it/urbsi/SiteGenen/{{currentCartography}}.pdf"
download>
<figure>
<img src="style/images/pdf-icon.png" alt="Download PDF" width="15%" height="15%">
<figcaption>English PDF</figcaption>
</figure>
</a>
<a ng-href="https://community.site.com/it/urbsi/SiteGenen/{{currentCartography}}.pdf"
download>
<figure>
<img src="style/images/pdf-icon.png" alt="Download PDF" width="15%" height="15%">
<figcaption>French PDF</figcaption>
</figure>
</a>
<a ng-href="https://community.site.com/it/urbsi/cartographies/{{currentCartography}}.vsd"
download>
<img src="style/images/vsd-icon.png" alt="Download VSD" width="15%" height="15%">
</a>
<a ng-href="https://community.site.com/it/urbsi/SiteGenen/{{currentCartography}}_FS.png"
download>
<figure>
<img src="style/images/png-icon.png" alt="Download PNG" width="15%" height="15%">
<figcaption>English PNG</figcaption>
</figure>
</a>
<a ng-href="https://community.site.com/it/urbsi/SiteGenen/{{currentCartography}}_FS.png"
download>
<figure>
<img src="style/images/png-icon.png" alt="Download PNG" width="15%" height="15%">
<figcaption>French PNG</figcaption>
</figure>
</a>
</div>
</md-dialog-content>
But my links are displayed on different lines. I tried display: inline;but no luck.
Which gives this instead of a one line dialog :
use layout="row" inside your div tag.
<md-dialog-content>
<div align="center" id="download" layout="row">
// your anchor tag
</div>
</md-dialog-content>
note: as you uses <md-dialog-content> its means you are using angular-material-design
Related
I am getting CLS ON this piece of HTML can anyone tell the reason for why iam getting a layout shift. iam trying hard to get the CLS below 0.1 but failed to do so .. i guess bootstrap classes may causing the issue but how can i fix it
<section class="page-banner Games" style="height:400px;">
<div class="new-banner-collection-page" style="padding-bottom:1rem;">
<div class="row" style="height:100%">
<div class="col-md-7" style="height:100%; float:left">
<div id="tags-new-banner" class="" style="padding-left: 32px;padding-top:17px;">
<span class="playabe-breadcrum" max-width="100%">
<a class="playabe-breadcrum js-track-ga" href="/" data-action="{"to Page":"/"}" data-category="clicked bread crumb" style="display: inline;">Home</a> >
</span>
<span class="playabe-breadcrum" max-width="100%">
<a class="playabe-breadcrum js-track-ga" href="/search_contents/preview/games" data-action="{"to Page":"/search_contents/preview/games"}" data-category="clicked bread crumb" style="display: inline;">Games</a> >
</span>
<span class="playabe-breadcrum" max-width="100%">
<a class="playabe-breadcrum js-track-ga" href="/search_contents/preview/math-games" data-action="{"to Page":"/search_contents/preview/math-games"}" data-category="clicked bread crumb" style="display: inline;">Math Games</a> >
</span>
<span class="playabe-breadcrum">Counting Games</span>
</div>
<div class="title-new-collection-page" style="">
<h1 style="font-weight:700;">
Counting Games for Kids
</h1>
</div>
<p class="less-banner-content">
<span>The first step to embracing math is learning to count. Children learn to identify, group and classify objects by counting. SplashLearn’s cool online counting games provide respite from the monotony of practice worksheets through colorful virtual manipulatives. Children develop a bond </span>
<span id="js-read-more-banner-btn" onclick="readMoreFunc()" style="color:blue;">... Read more</span>
<span id="js-read-more-banner-content" style="display:none">with numbers that will see them through advanced math in the upcoming years.</span>
</p>
<div class="signup-ctas-new-banner">
<a class="new-banner-signup-link-parent" href="/parents/register#!/parent/creation">
<button class="new-banner-signup-btn-parent">Parents, Sign Up for Free</button>
</a>
<a class="new-banner-signup-link-teacher" href="/teachers/register">
<button class="new-banner-signup-btn-teacher">Teachers, Use for Free</button>
</a>
</div>
</div>
<div class="new-banner-images col-md-5" style="float:right">
<img alt="Imge" class="" style="max-width: 100%; width: 100%;height: 100%;object-fit: contain;" src="http://localhost:8300/cms_assets/images/Common-page.jpg">
</div>
</div>
</div>
</section>
Hi when I load the page I see the background of "images class" loading before the ng-src image is load
is there a way to fix that?
using Angular js
<div class="images" >
<img ng-if="expression" class="imgclass" ng-src="{{vm.src || '//:0' }}" />
<img ng-if="!expression" class="imgclass" ng-src="absolute url" />
</div>
I would try this:
<div class="images" ng-if="loaded===true" >
<img ng-if="expression" class="imgclass" ng-src="{{vm.src || '//:0' }}" ng-init="loaded = true"/>
<img ng-if="!expression" class="imgclass" ng-src="absolute url" ng-init="loaded = true"/>
</div>
I am working on a website and am having problems with the CSS on the IPAD (and possibly the iPhone).
Basically on the Sponsors page: http://www.tcsdesignreno.com/fsw/?page_id=1149. I am getting a red background behind the different sections. I think it has to do with the H3 tags that have a red background.
The same thing happens here: http://www.tcsdesignreno.com/fsw/?page_id=1165. They both are using the Easy Columns plugin in Wordpress.
Here is some sample HTML
<h3 class="sponsor-hdr" style="text-align: center;">Advertising and Media Partners</h3>
<div class="ezcol ezcol-one-third">
<p><a title="Fire Rescue 1" href="http://www.firerescue1.com/" target="_blank"><img class=" size-full wp-image-1238 aligncenter" src="http://www.tcsdesignreno.com/fsw/wp-content/uploads/2014/12/161_FR1_FC_Logo_Stacked.jpg" alt="FireRescue1.com, Fire Chief" width="161" height="93" /></a></p>
</div>
<div class="ezcol ezcol-two-third ezcol-last">
<p><strong>FireRescue1 / Fire Chief</strong><br />
200 Green St.<br />
2nd Floor<br />
San Francisco, CA 94111<br />
Phone: 415-962-5912</p>
</div><div class="ezcol-divider"></div>
<div class="ezcol ezcol-one-third">
<p><a title="CSFA" href="http://www.csfa.net/" target="_blank"><img class=" size-full wp-image-1233 aligncenter" src="http://www.tcsdesignreno.com/fsw/wp-content/uploads/2014/12/116_LatestCSFA-3_5_x_2_75_Logo.jpg" alt="California State Firefighters' Assn " width="116" height="91" /></a></p>
</div>
<div class="ezcol ezcol-two-third ezcol-last">
<p><strong>California State Firefighters’ Assn </strong><br />
2701 K Street, Suite 201<br />
Sacramento, CA 95816<br />
Phone: 800-451-2732<br />
Fax: 916-446-9889</p>
</div><div class="ezcol-divider"></div>
<h3 class="sponsor-hdr" style="text-align: center;">Program Sponsors</h3>
<div class="ezcol ezcol-one-third"><a title="FPAN" href="http://www.fpanevada.org/" target="_blank"><img class="aligncenter size-full wp-image-1232" src="http://www.tcsdesignreno.com/fsw/wp-content/uploads/2014/12/116_FPAN_Logo_Color.jpg" alt="FPAN" width="116" height="116" /></a></div>
<div class="ezcol ezcol-two-third ezcol-last">
<p>In appreciation to:<br />
<strong>Fire Prevention Association of Nevada</strong><br />
<strong>National Code Services Association</strong></p>
</div><div class="ezcol-divider"></div>
<h3 class="sponsor-hdr" style="text-align: center;">Tote Bag Sponsors</h3>
<div class="ezcol ezcol-one-third"><a title="Burton's Fire" href="http://www.burtonsfire.com/" target="_blank"><img class="aligncenter size-full wp-image-1236" src="http://www.tcsdesignreno.com/fsw/wp-content/uploads/2014/12/158_BURTONS_FIRE_INC_LOGO.jpg" alt="BURTONS FIRE" width="158" height="54" /></a></p>
</div>
<div class="ezcol ezcol-two-third ezcol-last">
<p><strong>Burton’s Fire</strong><br />
1301 Doker Avenue<br />
Modesto, CA 95351<br />
209-544-3161</p>
</div><div class="ezcol-divider"></div>
<div class="ezcol ezcol-one-third"><a title="Waterous" href="http://www.waterousco.com/" target="_blank"><img class="aligncenter size-full wp-image-1237" src="http://www.tcsdesignreno.com/fsw/wp-content/uploads/2014/12/158_WaterousLogoSm.jpg" alt="Waterous" width="155" height="29" /></a></p>
</div>
CSS:
h3 {
background-color: #990000;
color: #ffffff;
padding: 10px 0;
text-align: center;
width: 100%;
max-height:92px;
}
Here is an image:
Can anyone see why these sections are showing up in red? For the life of me I can't seem to figure it out.
Looks like your floats aren't clearing. You can add this to your current styles:
.singlepost .content-entry h3 {
clear: both;
}
i need hide pics and no use display:none
I use Highlight script for create one gallery , the problem it´s i need only show 4 pics and no the others , the script let click in one pic and show the others with arrows , the problem it´s if i use display:none for the other pics and no in the first 4 , the other pics no show finally
I try other possibilities , but no works , i need hide all pics out of the firsts 4 but i can´t use display:none
The Best Regards
You can easily change this Highslide example gallery: http://highslide.com/examples/gallery-thumbstrip-above.html to have four visible thumbnails in the page instead of one visible thumbnail. The clue is to move the markup for the thumbnails you want to be visible, outside the hidden-container div.
The example gallery has one thumbnail outside the hidden-container div (see the source code).
jsFiddle with four visible thumbnails: http://jsfiddle.net/roadrash/Un4N7/ The HTML markup of a gallery with eight images, but only four visible thumbnails, will look like this:
<div class="highslide-gallery">
<a href="large-image1.jpg" onclick="hs.expand(this)" />
<img src="thumbnail1.jpg" alt="" />
</a>
<a href="large-image2.jpg" onclick="hs.expand(this)" />
<img src="thumbnail2.jpg" alt="" />
</a>
<a href="large-image3.jpg" onclick="hs.expand(this)" />
<img src="thumbnail3.jpg" alt="" />
</a>
<a href="large-image4.jpg" onclick="hs.expand(this)" />
<img src="thumbnail4.jpg" alt="" />
</a>
<div class="hidden-container">
<a href="large-image5.jpg" onclick="hs.expand(this)" />
<img src="thumbnail5.jpg" alt="" />
</a>
<a href="large-image6.jpg" onclick="hs.expand(this)" />
<img src="thumbnail6.jpg" alt="" />
</a>
<a href="large-image7.jpg" onclick="hs.expand(this)" />
<img src="thumbnail7.jpg" alt="" />
</a>
<a href="large-image8.jpg" onclick="hs.expand(this)" />
<img src="thumbnail8.jpg" alt="" />
</a>
</div>
</div>
I have been struggling with a problem for a while now. I've made a simple html gallery using CSS and a # href to essentially swap out different div ID's containing gallery images. The problem is that when you select the "next" or "previous" buttons in the gallery it jumps the page up in the browser so the gallery is aligned at the top of the page. Does anybody have any ideas how to prevent this?
Here is what the code for the gallery looks like:
<div id="pic1">
<img src="click/pic1.jpg" alt="" />
<a class="previous" href="#pic10"><b>Previous</b></a><a class="next" href="#pic2"><b>Next</b></a>
</div>
<div id="pic2">
<img src="click/pic2.jpg" alt="" />
<a class="previous" href="#pic1"><b>Previous</b></a><a class="next" href="#pic3"> <b>Next</b></a>
</div>
<div id="pic3">
<img src="click/pic3.jpg" alt="" />
<a class="previous" href="#pic2"><b>Previous</b></a><a class="next" href="#pic4"><b>Next</b></a>
</div>
<div id="pic4">
<img src="click/pic4.jpg" alt="" />
<a class="previous" href="#pic3"><b>Previous</b></a><a class="next" href="#pic5"> <b>Next</b></a>
</div>
<div id="pic5">
<img src="click/pic5.jpg" alt="" />
<a class="previous" href="#pic4"><b>Previous</b></a><a class="next" href="#pic6"><b>Next</b></a>
</div>
<div id="pic6">
<img src="click/pic6.jpg" alt="" />
<a class="previous" href="#pic5"><b>Previous</b></a><a class="next" href="#pic7"><b>Next</b></a>
</div>
<div id="pic7">
<img src="click/pic7.jpg" alt="" />
<a class="previous" href="#pic6"><b>Previous</b></a><a class="next" href="#pic8"><b>Next</b></a>
</div>
<div id="pic8">
<img src="click/pic8.jpg" alt="" />
<a class="previous" href="#pic7"><b>Previous</b></a><a class="next" href="#pic9"><b>Next</b></a>
</div>
<div id="pic9">
<img src="click/pic9.jpg" alt="" />
<a class="previous" href="#pic8"><b>Previous</b></a><a class="next" href="#pic10"><b>Next</b></a>
</div>
<div id="pic10">
<img src="click/pic10.jpg" alt="" />
<a class="previous" href="#pic9"><b>Previous</b></a><a class="next" href="#pic1"> <b>Next</b></a>
</div>
Any help would be greatly appreciated!
Instead of linking to #, link to javascript:void(0);
<a class="previous" href="javascript:void(0);">Next</a>
Or, prevent the default event with Javascript
$("a.previous, a.next").on("click", function(e) {
e.preventDefault();
});
You will need to use JQuery after you set
<a class="previous" href="javascript:void(0);">Next</a>
then call the JS:
$(document).ready(function(){
$('a.previous').click(function(e){
var picID= parseInt($(this).parent().attr("id").substr(3));//gets the pic id count
$("#pic"+(picID)).hide(); //hide the current div
$("#pic"+(picID-1)).show(); //show the previous div
});
$('a.next').click(function(e){
var picID= parseInt($(this).parent().attr("id").substr(3)); //gets the pic id count
$("#pic"+(picID)).hide(); //hide the current div
$("#pic"+(picID+1)).show(); //show the previous div
});
});
see: http://jsfiddle.net/uZ6g5/