I have created a content type called CaseStudy and given it a field called HomepageLogo.
I want the logos to appear on the homepage. To do this I have added a Projection Widget into my AfterContent zone and onto to the homepage layer within widgets with a query to get me X amount of case studies to display.
Within my query I have the Raw layout selected with the wrapper container tag of "P" and class "logos".
What I am now needing is this wrapper to wrap everything
<div class="outer home-case-studies">
<div class="inner"> {logos in here}
</div>
</div>
When I put the above wrapper in Content-CaseStudy.HomepageSummary.cshtml I get the wrapper repeated many times over and there doesn't seem to be an alternate available to me "one level higher".
Any help would be greatly appreciated
Thanks
Anto
Related
Am using manage display to display nodes
The divs show no default classes as in the case below
<div>
<div>Pricing</div>
<div content="25000">25,000</div>
</div>
How do I resolve this?
I have not tried anything yet.
I need to be able to arrange a list of images (4 in my case) to a row and the link text to appear below like so:
row1
image1 image2 image3 image4
linkText1 linkText2 linkText3 linkText4
row2
image5 image6....
linkText5 linkText6.....
and so for however many images are. Here whether you click on the image or on its linkText, its supposed to open a document in a new window.
Here's the html that I intend, but doesn't work the way I want. It just puts one image per row. I have tried various combinations nothing seems to work. Although if I use just the img element and use the ng-repeat on it, the images flow the way I want, 4 to a row, but that doesn't serve my purpose as I want the link text as well below each image.
<div ng-repeat="items in DocImageCollection ">
<div ng-repeat="row in items">
<img alt="{{row.linkText}}"
ng-click="$event.preventDefault();openDocument({{row}});" ng-src="{{row.imageSrc}}" imageonload />
<br />
<span ng-click="$event.preventDefault();openDocument({{row}});">
{{row.linkText}}</span>
</div>
</div>
Here
imageonload is a directive which I have created for downloading the
image source,
DocImageCollection - is the main collection; for e.g. if I have 10 images in
all, then this will be an object array of capacity = 3, where each array
element (row) is itself an array of 4 image objects
I have all the data correct, I just have issue in the templating. Any help is
greatly appreciated.
The div tag is a block level element so it'll appear on it's own line unless you change the CSS display attribute to inline-block. Specifically, you need to target the display attribute for the div that contains the img and link.
Here's an example on codepen:
http://codepen.io/gwmccull/pen/LpYLLp
you can use an indexing method with your ng-repeat.
Check this
Adapted from here
ps. Not necessarily you will use the ng-if, this only serves you in case you want to only show multiples of 4
I am trying to make table or grid view in ionic framework.I am able to make that table but It is not looking same what I am required please check my table view in image .
here is my code .Actually I have also header "Invoice#" and "account Name" they should become background gray .Actually I saw if we take two column in row it take 50% 50% width of window .But when there is 3 column column take 33.33 % width But in my case they are not able to take where I am doing wrong Actually I am generating column dynamically Now it is two but may be later five .I need they will take equal space of total width .is this possible to add "+" in last column ?
here is code
<div class="row">
<div ng-repeat="d in data | filter:{checked: true}">
<div class="col">{{d.label}}</div>
<div class="row" ng-repeat="column in displayData">
<div class="col" ng-repeat="field in column.columns" ng-show="d.fieldNameOrPath==field.fieldNameOrPath">{{field.value}}</div>
</div>
</div>
</div>
http://plnkr.co/edit/X0PQov1UA2yEbx8qaOFl?p=preview
Here's a working version of your Plunker. To see the columns added and removed, click the gear icon in the header right.
Plunker
To get your grid to layout properly, you can't nest your repeats. That means you have to slightly change your ng-show to observe the checked values on the data model directly.
In it's most basic form, it would look like this:
<div class="row">
<div class="col" ng-repeat="d in data | filter:{checked: true}">{{d.label}}</div>
</div>
<div class="row" ng-repeat="column in displayData | filter: query">
<div class="col" ng-repeat="field in column.columns" ng-show="data[$index].checked && data[$index].fieldNameOrPath===field.fieldNameOrPath">{{field.value}}</div>
</div>
You'll notice that Ionic automatically handles making the grid full width and when properly laid out, it will automatically evenly space your columns. That's because it uses flexbox. That also allows you to tell specific columns how much space they should use. The remaining columns will naturally even distribute to take up the rest of the space. In the demo, I added a column for the gear and the details buttons and gave them col-10 class. This will force these columns to take up 10% of the screen width. For more on how the grid works in Ionic read the docs here.
I also noted that you seemed to have lots of functions where you're trying to do things like manage how the checked values are updated. Stop doing that. That's the beauty of AngularJS and the ng-model directive. If the property doesn't exist on the scope, Angular just creates it for you, and if it does exist, it just updates it. For example, notice how simply I made your search work by setting the ng-model value and passing that to the filter. I didn't have to create a $scope.query because ngModel does that for me. Similarly, I removed all of the functions and references to the 'checked' values from your controller and everything just works because ngModel automatically adds the checked property to the data model.
I'm having a problem with removing the bullet point's from my menu, and changing it from a list view, to a vertical view. The template should look how any menu should look like. I will provide pictures below, any help is good, thanks!
In Joomla, the field menu class suffix is used to specify a piece of text - without spaces - which will be appended to the class of the menu block.
For example, if you use the layout type for a meny, there will be a
<div class="moduletable">
If you add a suffix of "_mysite", this will change to
<div class="moduletable_mysite">
So you can't use this field to specify custom CSS, this needs to go into your template's css code. You can only specify a suffix for a class here.
I am not a clean CSS coder, so this may be the crux of my problem... but...I've cobbled together an interactive map from this tutorial: http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/.
My solution: http://www.paideiaschool.org/testing/barb_map.htm
I think I have the initial "rollovers" of the map working-- (I've only coded the first two buildings in the upper left of the map) and am happy with that.
My problem is I want the legend of the map to do the same things as the rollovers of the map. I've come up with a clumsy solution that works (labeled '1509'), but not well in all browsers, and that tells me I have gone wrong somewhere.
I'm trying to avoid javascript as well.
What is the main problem?
Here's an updated jsFiddle for part one
Here's the basics:
<div id="city-map">
<div class="pop-up">...</div>
<div class="pop-up">...</div>
...
</div>
We use an image map with anchor tags as "hot spots". We use CSS to absolutely position these "hot spots" in the proper location and we do the basic background image sprite "trick", the same you did in your original code.
However, I updated your sprite image to have two "hover" images. When making an image hover map with none-square image spots (like buildings overlapping each-other), a single hover state runs into problems with a "neighbor" icon showing up in the hot spot slice. This is due to due HTML blocks being square and not being able to draw odd shapes. We solve this by having extra images states so you can make the neighbors still look un-highlighted.
Pop-up box
<div class="pop-up">
<h1 class="title">Mac</h1>
<div class="content">Some Content</div>
</div>
All the pop-up boxes have this HTML format. I position: absolute; them off to the side with the standard left:-999em; trick. I crafted the CSS to give them a standard pop-up location with a slight space between the hot-spot box and the pop-up box. This helps ensure your mouse will "hover out" of the hot-spot when reaching for a new hot-spot. Otherwise, you'll hover over the pop-up box and it won't go away until you over off both.
<div id="city-map-legend">
<div id="glamour-photo">
<img src="..." id="mac-img" />
<img src="..." id="admin-img"/>
...
</div>
<div id="cml-list">
<h2>Around Campus</h2>
<ul>
<li><a id="mac-list" href="#">Mac</a></li>
...
</ul>
</div>
</div>
For the "map legend", I have a group of "glamour images" and a list of links. Pretty standard stuff. The key is how they're all tied together with their ID's. JavaScript will use this to swap images and CSS states as we tie the three elements (map, glamour image, and list of links) together.
ID's in the map are the straight up ID name like "mac". ID's in the glamour images are "[id]-img" (ie. "mac-img"). And ID's in the list are "[id]-list" (ie. "mac-list").
<script type="text/javascript" src="*"></script>
* = http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
I recommend using jQuery to help do easy JavaScript-ing and loading it from Google API for easy Content Delivery Network benefits.
All that's really left is the JavaScript event.
$(document).ready(function() {
// highlight map when legend link is hovered
$('#cml-list a').hover(
// hover over
function(){
// get id code
var id = $(this).attr('id');
// tokenize string to get main id code
var tokens = id.split('-');
id = '#' + tokens[0];
// add active class to map id
$(id).addClass('active');
},
// hover out
function(){
// clear all .active classes from map
$('#city-map a').removeClass('active');
}
);
});
What happens above is we tell JavaScript to trigger anytime someone hovers a list link. There are two events when hovering, in and out.
When someone hovers into a link, we get the base ID value from it and all we do is apply a CSS class "active" to the map "hot spot".
".active" class will basically "turn on" the map item as if it was hovered (if you notice in the CSS, all the :hover selector styles are also shared with a '.active' class).
When we hover out, we simply tell jQuery to remove all 'active' classes. All that's left to do is swap also write some code that does the same thing for the "glamour" images. Simply turning them on (display:block) or off (display:none). The one catch is that there should probably be a default image that we always turn back on if nothing else is selected unless we just want the previously activated glamour image to stay active, that works too.
I've not gotten to that bit of code yet. I'll see I can update it later and maybe leave a little bit for you to play around with.
update
I developed it mostly in Chrome and a little Firefox. I just checked
it in IE7/8/9 and it seemed to work fine.
I updated the jsFiddle to include glamour image swapping. I also had a small CSS bug where I placed the float in the wrong spot. So, work off the latest one.
NOTE I did not do the CSS for all the locations. I did several with some examples, but left the rest for you. =)
Btw, I updated your map image and uploaded it on imgur.com => http://i.imgur.com/n7spM.png