I have the following landing page - Cold Call with Confidence
There are two downward facing arrows on the page that are generated with the code below:
<div class="content" style="padding-top:0px;">
<div class="right sld_cont">
<img src="http://coldcallwithconfidence.com/wp-content/uploads/2015/01/Arrow_comic_right_gray_T.png">
</div>
<div class="left sld_cont">
<img src="http://coldcallwithconfidence.com/wp-content/uploads/2015/01/Arrow_comic_right_gray_T1.png">
</div>
</div>
I would like to hide one of the arrows on mobile as it looks repetitive in the mobile view.
Can anyone explain how I might do that?
I would suggest that you are looking to hide the right arrow on viewports that stack those elements rather than specifically hiding them on mobile devices.
The previous answer is correct based upon your question, however I think this might be a more suitable solution for you.
#media only screen and (max-width: 679px) {
.right.sld_cont {
display: none;
}
}
This means that for any viewport that is 679px or smaller the right arrow will be hidden.
Take a look at MobileDetect.js , then you can use this as a PHP if statement, and only show it if it's not a mobile device.
if(!$detect->isMobile()) {
# desktop code
}
Edit:
<?php if(!$detect->isMobile()) { ?>
<div class="content" style="padding-top:0px;">
<div class="right sld_cont">
<img src="http://coldcallwithconfidence.com/wp-content/uploads/2015/01/Arrow_comic_right_gray_T.png">
</div>
<div class="left sld_cont">
<img src="http://coldcallwithconfidence.com/wp-content/uploads/2015/01/Arrow_comic_right_gray_T1.png">
</div>
</div>
<?php } ?>
Related
I have an strange issue with displaying graphs in AMD Layout.
There are two widgets in which I've defined graphs and here is how it looks like - you can see that graphs in widgets go out of their area
I've tried reproduce this bug in plunker and there is nothing wrong :/
When I make a small change in browser (for example, I move the edge of the browser), graphs return to the right place -> http://recordit.co/mRmNAjH840
<div layout="row" ng-controller="GraphCtrl" layout-md="column" layout-sm="column" layout-margin="">
<section class="widget md-whiteframe-z1 ng-isolate-scope md-cyan-theme" ng-class="{'widget-overlay-title': overlayTitle}" ng-attr-layout="{{widgetLayout}}" content-padding="" flex-gt-lg="66" flex-gt-md="66">
<div class="panel-heading">Widget1<span flex=""></span>
</div>
<div class="panel-body">
<div id="chart1"></div>
</div>
</section>
<section class="widget md-whiteframe-z1 ng-isolate-scope md-cyan-theme" ng-class="{'widget-overlay-title': overlayTitle}" ng-attr-layout="{{widgetLayout}}" content-padding="" flex-gt-lg="32" flex-gt-md="32">
<div class="panel-heading">Widget2<span flex=""></span>
</div>
<div class="panel-body">
<div id="c3_combined"></div>
</div>
</section>
</div>
I'm not sure if this is related to your problem, but on IE, I have to add this CSS property manually :
svg { overflow: hidden; }
I have a problem. I have Index page where i load different pages in <div ng-view></div>.I have sidebar, so while im waiting that ng-view load page sidebar goes on left side and i dont want that.
In index i have <div ng-view></div> and right side menu:
<div class="col-lg-3 col-md-3">
<div class="right-sidebar">
#foreach (var item in Model.SideAccountBanners)
{
<div class="promo">
<a href="#item.LinkTo">
<div class="image">
<img class="resize" src="#item.BannerPath" alt="" />
<h1 class="title">#MvcHtmlString.Create(Html.Encode(item.Title).Replace("-", "<br />"))</h1>
<p class="description">#MvcHtmlString.Create(Html.Encode(item.Description).Replace("-", "<br />"))</p>
</div>
</a>
</div>
How can i set default size for that <div ng-view></div> or set something like document ready? idk
You should be able to do this with css:
[ng-view] {
min-height: 100%;
}
Something like the above.
EDIT: If you have multiple ng-views you will want to change the css.
I'm looking for a Angular Carousel there is working with Bootstrap divs
I want it to shift between Divs, and I get the next div in center when clicking next or previous.
Bootstrap exsampel til wrap with carousel:
<div class="row">
<!-- Carousel start -->
<div class="col-md-1 col-sm-6">
<div class="box box-lg br-black animated">
<div class="box-content box-default">
Functionality 1
</div>
</div>
</div>
<div class="col-md-8 col-sm-6">
<div class="box box-lg br-black animated">
<div class="box-content box-default">
Functionality 2
</div>
</div>
</div>
<div class="col-md-1 col-sm-6">
<div class="box box-lg br-black animated">
<div class="box-content box-default">
Functionality 3
</div>
</div>
</div>
<!-- Carousel end --></div>
What possibilities do I have?
your question is a little confused to me. I understood your question but the code show something different. I will try to answer you the question with several alternatives. If you could be more specific with your problem I will help you quickly.
First, there are several carousel for AngularJS. There are single libraries that creates carousel, and others like ui-bootstrap(angular-ui) and AngularStrap that fit much better with Twitter Bootstrap. If you want to use AngularJS with TB, I recommend you ui-bootstrap. I have worked several times with the library and never let me down.
So, creating the carousel with ui-bootstrap we have several alternatives. First, to place the content of your divs in the center you have not use the grid system obligatory. You can use a single row and center the elements with text-align, margin:0 auto, flex model or others techniques. In this case check the next plunk:
http://plnkr.co/edit/XmzaJx5mXddLQ4S1k7BV
If you want to create each div with columns of the grid system, like your code shown, you have to shift the columns with .col-md-offset-x, leaving the same space at the sides. Check the plunk.
http://plnkr.co/edit/ihpwrWC0p64eO1jiddl2
I hope that my answer help you at least a little, If your question is another please, let me know.
I've just started working on a project that requires me to learn AngularJS. What I'm trying to do is create two menus that slide into the screen, one from the left, one from the right. When they do this they push the content over.
Currently I can get one or the other to work, but not both. I realize this is because of the way that I'm defining the ng-class. I just can't quite conceptualize how to do it correctly.
<div ng-class="{true:'slide-left', false:''}[toggleSlide]" class="container">
<div class="content">
<button ng-click="toggleSlide = !toggleSlide" class="btn-left">From Left</button>
<button ng-click="toggleSlide = !toggleSlide" class="btn-right">From Right</button>
</div>
<div class="slide-from-left">
<p>Here is information that slides from off screen left.</p>
</div>
<div class="slide-from-right">
<p>Here is information that slides from off screen right.</p>
</div>
</div>
Set up the ng-class syntax like this for what you want:
<div ng-class="{'slide-left':toggleSlide, 'slide-right':!toggleSlide}" class="container">
Also, I'm guessing you were trying to adapt your code to something else you saw, so I'll offer something on that also. Here's an ng-class using ng-repeat's $index to dole out classes for even and odd:
ng-class="['even', 'odd'][$index % 2]"
Can you only rearrange the source order for entire columns, or is it possible to rearrange a content block out of a column on a mobile view?
I'm working with Foundation 3 and am trying to change the source order of certain content on mobile. I understand from the docs how push-#-mobile and pull-#-mobile work, but need to do something a bit different.
We have a two column desktop layout: .eight.column for main content and .four.column for a sidebar. In mobile the sidebar appears below the main content as intended.
However, there is an within the .four.column sidebar that I need to display above the main content .eight.column in mobile view. The other blocks in the sidebar should still appear below the main content.
One suggestion a colleague had was to make a duplicate content block above the main content that is hide-for-large and make the sidebar hide-for-small. I hope there is a better option with Foundation that doesn't make me repeat code.
Here is a code snippet for what we currently have:
<section class="eight column">
<article>main content</article>
</section>
<aside class="sidebar four column">
<article>Some content</article>
<article class="first-in-mobile"> This should be above the main content in mobile view
</article>
<article>Some more content</article>
</aside>
Basically, does Foundation 3 provide a way for me to break the out of its parent column and display it in a different place in mobile view? Any suggestions for workarounds?
No there is no out-of-the-box way of doing it. And your colleague's suggestion is the right way of doing it. But I understand it's not the best especially if you have large contents in that area you want to move. But you can move it, instead of duplicating it. You can do it either by css or jquery. I prefer the latter for your specific scenario:
The layout
<div class="row" id="mainPh">
<div class="large-8 columns" id="mainContent">
<h1>Main content</h1>
</div>
<div class="large-4 columns" id="sidebar">
<div class="panel" id="firstSidebar">
<p>Some content</p>
</div>
<div class="panel" id="mobiMiddle">
<p>Middle content</p>
</div>
<div class="panel">
<p>Some more content</p>
</div>
</div>
</div>
The script
<script type="text/javascript">
var mainContent = $("#mainContent");
var sidebar = $("#sidebar");
var mobiMiddle = $("#mobiMiddle");
var mainPh = $("#mainPh");
var firstSidebar = $("#firstSidebar");
$(document).foundation();
$(document).ready(function () {
});
$(window).resize(function () {
var wd = $(window).width();
if (wd < 768) {
mainPh.prepend(mobiMiddle.detach());
}
else {
firstSidebar.after(mobiMiddle.detach());
}
});
</script>
You can change 768 to the size of device you are targeting.